如何从 angular-material2 对话框与其父对话框进行通信

Question

我有打开angular-material2对话框的Parent组件。

let dialogRef = this.dialog.open(Child, {
            disableClose: true
        });

打开的对话框Child组件有一个按钮“添加”。 如果用户单击“添加”按钮，我想通知“父”组件。

这怎么可能？

Answer 1

我使用EventEmitter与父容器通信

    // dialog component
    ...
    onAdd = new EventEmitter();
    
    onButtonClick() {
      this.onAdd.emit();
    }
    ... 

和父组件

    // parent component
    ...
    let dialogRef = this.dialog.open(Component);
    const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
      // do something
    });
    dialogRef.afterClosed().subscribe(() => {
      // unsubscribe onAdd
    });
    ...

这是演示

http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z

感谢thomaspin

Answer 2

您的答案是正确的，但在 Angular2 材料文档中已经以简单的方式提到了这件事，因为您可以subscribe dialog Reference afterClosed方法（示例中的dialogRef），并且您将从subscribe方法的参数中获得所选选项的值（在我们的案例结果）。

let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

有关更多详细信息，您可以访问此链接https://material.angular.io/components/component/dialog并转到示例选项卡并尝试理解简单示例。

Answer 3

使用 "@angular/material": "~7.0.0" componentInstance不再存在于 MatBottomSheetRef 上。

它已被instance替换

父实现：

let dialogRef = this.dialog.open(Component);
const sub = dialogRef.instance.onAdd.subscribe(() => {
  // do something
});

Answer 4

如果父项是服务，则您可以通过该服务进行通信。

但是，如果它们都相互引用，您将遇到循环引用问题。 您可以在打开对话框时使用data参数将“父级”传递给它（我喜欢通过接口执行此操作）。

所以在组件中，当你注入MAT_DIALOG_DATA你可以将它指定为某个接口。

  @Inject(MAT_DIALOG_DATA) public data: IMainMenuDialogData

然后为您传入的任何内容定义它。

export interface IMainMenuDialogData
{
    mainMenuService: MainMenuService;
}

在“父”组件中，您通过data属性将其传入

this.dialogRef.next(this.dialog.open(MainMenuDialogComponent, {
        width: '100vw',
        height: '100%',
        data: <IMainMenuDialogData> { mainMenuService: this }  ....

如果你不喜欢传入整个服务，你可以传入特定的 observables、属性或任何你需要的东西。