使用没有MatDialog,MatDialogRef的组件

问题描述 投票:1回答:1

我有一个函数打开一个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注入器构造函数。

无论如何要解决或解决这个问题?

angular typescript angular-material angular-material2
1个回答
2
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.