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

【问题标题】：How to communicate from angular-material2 dialog to its parent如何从 angular-material2 对话框与其父级进行通信
【发布时间】：2017-07-31 17:54:59
【问题描述】：

我有一个Parent 组件，它打开了一个angular-material2 对话框。

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

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

这怎么可能？

【问题讨论】：

至少给出一个拒绝投票的理由

标签： angular dialog angular-material2

【解决方案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

【讨论】：

工作。谢谢
谢谢。这适用于对话和母版页通信。也是了解发射器的好例子

【解决方案2】：

您的答案是正确的，但是这件事已经在 Angular2 Material Documentation 中以一种简单的方式提到过，您可以使用dialog Reference 的subscribe 到afterClosed 方法（如示例中的dialogRef），您将获得所选选项的来自subscribe 方法参数的值（在我们的例子中为 result ）。

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

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

【讨论】：

您的答案值得一票，但在我的情况下，接受的答案是正确的。我需要在不关闭模式的情况下与父模块进行通信。

【解决方案3】：

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

已被instance替换

父实现：

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

【讨论】：

【解决方案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、属性或任何你需要的东西。

【讨论】：