Question

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

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 {}

component1：

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"
        });
      }

component2：

 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实例？我在网上搜索了所有内容，但没有找到解决此问题的答案...。由衷的感谢

Answer 1

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

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

还需要确保 MatDialogRef 存在于提供程序数组中

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

Github issue

Answer 2

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

Answer 3

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

请参阅我关于该主题的建议。我的建议是简化对话框实例化的方式。有一种使用MatDialog的方法，使得“父”组件是唯一需要了解管理对话框的东西。

Answer 4

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

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

对于组件为

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

并用于测试文件（规范）

从“ @ progress / kendo-angular-dialog”导入{DialogsModule，DialogRef};

提供者：[{ 提供：DialogRef， useValue：{ 关闭：（dialogResult：任意）=> {} } }]

角材料：没有dialogRef的提供者

4 个答案: