如何从 angular-material2 对话框与其父级进行通信 [英] How to communicate from angular-material2 dialog to its parent

问题描述

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

I have Parent component that opens an angular-material2 dialog box.

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

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

opened dialog Child component has a button 'Add'. I want to notify the `Parent' component if user click on 'Add' button.

这怎么可能?

推荐答案

我使用 EventEmitter 与父容器通信

I used EventEmitter to communicate back to parent container

    // 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

这篇关于如何从 angular-material2 对话框与其父级进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！