如何從 angular-material2 對話框與其父對話框進行通信

Question

我有打開angular-material2對話框的Parent組件。

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

感謝thomaspin

Answer 2

您的答案是正確的，但在 Angular2 材料文檔中已經以簡單的方式提到了這件事，因為您可以subscribe dialog Reference afterClosed方法（示例中的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 }  ....

如果你不喜歡傳入整個服務，你可以傳入特定的 observables、屬性或任何你需要的東西。