[英]Angular NullInjectorError: No Provider for MatDialog
so when I try to load my angular app, i get this error:因此,当我尝试加载我的 angular 应用程序时,出现此错误:
ERROR Error: Uncaught (in promise):
NullInjectorError: StaticInjectorError(AppModule)[AppComponent -> MatDialog]:
StaticInjectorError(Platform: core)[AppComponent -> MatDialog]:
my ts file looks like this, every other help question said to add MatDialog to my NgModule imports, but I have done that and am still receiving the error.我的 ts 文件看起来像这样,每个其他帮助问题都说要将 MatDialog 添加到我的 NgModule 导入中,但我已经这样做了并且仍然收到错误。 Most of those errors were StaticInjectorErrors and mine is a NullInjectorError but I am not sure what the difference is between those two.
大多数这些错误是 StaticInjectorErrors 而我的是 NullInjectorError 但我不确定这两者之间有什么区别。
import { Component, NgModule } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { compileNgModule } from '@angular/compiler';
import { AppDialog } from '../appDialog/app-dialog.component';
@Component({
selector: 'app-component',
templateUrl: './app.component.html'
})
@NgModule({
imports: [MatDialog, MatDialogRef, MatDialogConfig, MatDialogModule]
})
export class AppComponent {
constructor(private appService: AppService, private dialog: MatDialog) {
}
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.height = "350px";
dialogConfig.width = "600px";
dialogConfig.data = {
};
const dialogRef = this.dialog.open(AppDialog, dialogConfig);
dialogRef.afterClosed().subscribe(result => {
console.log('closed dialog');
this.success = result;
})
}
}
In my situation, I was seeing this error while trying to build a dialog component like:在我的情况下,我在尝试构建对话框组件时看到此错误,例如:
my-dialog.component.ts
<mat-dialog-container>
<mat-dialog-content>
<p>Hello</p>
<p>I am a dialog</p>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button>Click me</button>
</mat-dialog-actions>
</mat-dialog-container>
The problem was that I was using mat-dialog-container
.问题是我使用的是
mat-dialog-container
。 This is not required for components that you'll be rendering via matDialog.open(MyDialogComponent)
对于您将通过
matDialog.open(MyDialogComponent)
渲染的组件,这不是必需的
Instead, just remove mat-dialog-container
entirely and just use the child nodes.相反,只需完全删除
mat-dialog-container
并仅使用子节点。
Please note that in Angular Material
you have to import all elements module
into your module.ts
.请注意,在
Angular Material
您必须将所有元素module
导入到module.ts
。 You have to import and add module in your module.ts
like this您必须像这样在
module.ts
导入和添加模块
import {MatDialogModule} from '@angular/material/dialog';
import : [MatDialogModule]
For reference see the example from official documentation here有关参考,请参阅此处的官方文档中的示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.