不使用MatDialog，如何使用组件和MatDialogRef<SomeComponent>？

Question

我有一个函数，它打开一个名为“NoteFormComponent”的组件的MatDialog，代码如下：

  openForm() {
    let dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    dialogConfig.width = "95%";
    dialogConfig.panelClass = "form-dialog";
    dialogConfig.scrollStrategy = new NoopScrollStrategy();

    this.dialog.open(NoteFormComponent, dialogConfig).beforeClose().subscribe(() => this.getNotes());
  }

我弹出了一个包含“NoteFormComponent”的模态框。 那么问题是什么呢？

问题在于，我想要在没有MatDialog的情况下使用“NoteFormComponent”，但是为了能够在MatDialog中使用它，我不得不像这样在组件的构造函数中注入一个引用：

```typescript constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any ) { } ```

  constructor(
    private noteService : NoteService, 
    private productService : ProductService,
    private categoryService : CategoryService,
    private clientService : ClientService,
    private notification : NotificationService,
    private dialogRef : MatDialogRef<NoteFormComponent>, /*This Reference*/
    private loader : LoaderService,
    private sessionService : SessionService,
    private securityBlockerService : SecurityBlockerService,
    private dialog : MatDialog,
    private dialogService : DialogService
  ) { }

如果我尝试使用模板选择器“”来使用组件，则会出现错误，提示没有为MatDialogRef提供程序，我唯一能想到的就是创建一个不包含构造函数中MatDialogRef注入器的“NoteFormComponent”副本。

有没有解决或解决这个问题的方法？

最初的回答：该错误通常发生在Angular应用程序中，因为MatDialogRef没有引入。解决此问题的一种方法是将MatDialogModule导入到应用程序的根模块中。

- Valentin Garcia

Answer 1

在构造函数中注入MatDialogRef时，请使用@Optional()装饰器（参考文档）：

constructor(
    ...
    @Optional() private dialogRef: MatDialogRef<NoteFormComponent>,
    ...
) { ... }

通过这样做，您可以按照正常方式使用NoteFormComponent，而无需使用MatDialog。

- Eiman

---

谢谢！这正是我所需要的。 - Valentin Garcia

你认为Angular是否需要一个类似的功能：不再使用@Optional() private dialogRef: <..>，而是使用private dialogRef?: <..>并具有相同的行为？ - Morilla Thaisa

更简洁的方式是这样输入：@Optional() private dialogRef: MatDialogRef<NoteFormComponent> | null。 - Elias Strehle