如何从角物质2对话框与其父对话进行通信

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

多亏了山苍子

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

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

但是，如果它们都相互引用，则会遇到循环引用问题。您可以在打开对话框时使用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 }  ....

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