Angular 材质：没有提供 dialogRef答案

【问题标题】：Angular material: No provider for dialogRefAngular 材质：没有提供 dialogRef
【发布时间】：2018-11-04 13:10:25
【问题描述】：

嘿，我正在尝试使用角度材质对话框，但遇到了一个问题：

ERROR 错误：未捕获（承诺）：错误： StaticInjectorError(AppModule)[MatDialogClose -> MatDialogRef]： StaticInjectorError（平台：核心）[MatDialogClose -> MatDialogRef]： NullInjectorError: MatDialogRef 没有提供者！

module.ts:

...
import {
  MatDialogModule,
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatToolbarModule,
  MatExpansionModule
} from "@angular/material";

...

@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
    HeaderComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule,
    MatDialogModule,
    HttpClientModule
  ],
  entryComponents: [PostCreateComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

组件1：

import { MatDialog } from "@angular/material";
 constructor(public dataService: DataService, public dialog: MatDialog) {}

    onEdit(postId: string) {
        this.dataService.editMode = true;
        this.dataService.postIdForEdit = postId;
        const dialogRef = this.dialog.open(PostCreateComponent, {
          width: "500px"
        });
      }

组件2：

 import { MatDialogRef } from "@angular/material";


      constructor(
        private fb: FormBuilder,
        public dataService: DataService,
        public route: ActivatedRoute,
        private dialogRef: MatDialogRef<PostCreateComponent>
      ) {}

      ...


      onAddPost(form, formDirective: FormGroupDirective) {
   ...
           this.close();
        }

       close() {
 this.dialogRef.close();
      }
    }

我导入了所有需要的东西，为什么会出现这个错误？我还需要在哪里添加MatDialogRef 实例？我已经搜索了整个网络，但没有找到这个问题的答案....衷心感谢

【问题讨论】：

在 providers 数组中添加 MatDialogRef。
你在哪里使用 MatDialogClose？
您的模板可能有问题。您能否为您的对话框附加 HTML 模板？
这能回答你的问题吗？ angular material No provider for MatDialog! Error

标签： angular angular-material

【解决方案1】：

您需要导入 MatDialogModule, MatDialog and MatDialogRef from @angular/material/dialog 而不是 @angular/material

import { MatDialogModule } from '@angular/material/dialog';

您还需要确保 MatDialogRef 存在于 providers 数组中

providers: [{
  provide: MatDialogRef,
  useValue: {
    close: (dialogResult: any) => { }
  }
}]

Github issue

【讨论】：

它也需要存在于提供者中github.com/angular/material2/issues/8419

【解决方案2】：

也许你对 Angular Core、Material 和 CDK 之间的版本有问题。我通过删除 node_modules/ 和 package-lock.json / 和 yarn-lock（如果存在）并运行全新的 npm 安装解决了这个问题。

【讨论】：

【解决方案3】：

这看起来与此处的错误和问题非常相似：angular material No provider for MatDialog! Error

请参阅我关于该主题的建议。我的建议是简化对话实例化的方式。有一种使用 MatDialog 的方法，这样“父”组件是唯一需要注意管理对话框的事情。

【讨论】：

【解决方案4】：

对于组件，您需要在已将组件注册为的模块文件中导入模块

从“@progress/kendo-angular-dialog”导入 { DialogsModule }；

作为组件

从 '@progress/kendo-angular-dialog' 导入 { DialogRef }；

并用于测试文件（规范）

从 '@progress/kendo-angular-dialog' 导入 { DialogsModule, DialogRef }；

提供者：[{ 提供：DialogRef，使用价值：{ 关闭: (dialogResult: any) => { } } }]

【讨论】：