使用不带 MatDialog、MatDialogRef<SomeComponent> 的组件

Question

我有一个函数可以打开一个 MatDialog，其中包含一个名为 'NoteFormComponent' 的组件，看起来像这样

  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 一起使用，我不得不在组件的这样的构造函数

  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 的提供者，我唯一想到的是创建 'NoteFormComponent' 的副本，但在构造函数中没有 MatDialogRef 注入器。

有什么方法可以解决或解决这个问题吗？

Answer 1

在构造函数中注入 MatDialogRef 时使用 @Optional() 装饰器 (Reference):

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

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