Question

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

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

感谢thomaspink

Answer 2

您的答案是正确的，但Angular2材料文档中已经以一种简单的方式提及了这一点，因为您可以subscribe afterClosed dialog Reference的方法（示例中的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 }  ....

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

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

4 个答案: