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

Question

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

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

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

这怎么可能？

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

感谢thomaspink

Answer 2

你的答案是正确的，但是这件事已经在 Angular2 Material 文档中以简单的方式提到，你可以 subscribe 到 dialog Reference 的 afterClosed 方法（dialogRef如示例中所示），您将从 subscribe 方法的参数（在我们的示例中为 result ）中获取所选选项的值。

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

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

Answer 3

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

但是，如果它们相互引用，您将运行陷入循环引用问题。您可以在打开对话框时使用 data 参数将 'parent' 传递给它（我喜欢通过界面执行此操作）。

所以在组件中注入的时候MAT_DIALOG_DATA可以指定为某个接口

  @Inject(MAT_DIALOG_DATA) public data: IMainMenuDialogData

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

export interface IMainMenuDialogData
{
    mainMenuService: MainMenuService;
}

在 'parent' 组件中，您通过 data 属性

将其传入

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

如果您不喜欢传递整个服务，您可以传递特定的可观察对象、属性或您需要的任何其他内容。

Answer 4

使用“@angular/material”：“~7.0.0”componentInstance 不再存在于 MatBottomSheetRef 上。

已替换为instance

父实现：

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

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

How to communicate from angular-material2 dialog to its parent

angular

dialog

angular-material2