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

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并转到示例选项卡并尝试理解简单示例.