通過觸發對話框疊加功能在角度組件之間傳遞值

Question

在我的Angular應用程序中，我有一個帶有打開對話框疊加功能的組件。 我試圖弄清楚如何將一些數據從原始組件傳遞到此對話框組件（EnrollingProcessComponent）。 這不是父子關系，所以我不能在這里使用Input（）或[]綁定。

此外，由於多個實例可能會導致我不會進入此處的問題，因此我們不會使用服務來獲取和共享組件之間的數據。 所以我不能注入一個服務來獲取對話框組件（EnrollingProcessComponent）中的相同實例。

所以，所有這些，我需要以某種方式將這些數據（這只是一個電子郵件地址）從原始組件傳遞到對話框組件。 我假設我應該能夠通過將其作為參數傳遞來實現這一點，但到目前為止我無法使其工作（即，當我控制原始組件中的值時，我得到了值。但是當在對話框（EnrollingProcessComponent）組件中安慰該值，我得到'undefined'）。

我使用click（）事件打開對話框組件：

<button *ngIf="canBeEnrolled()" md-menu-item 
(click)="onContactClicked()">
  <span class="md-menu-text">Initiate Contact</span>
</button>

並且觸發的功能如下所示：

public onContactClicked(primaryContactEmail): void {
    primaryContactEmail = this.getPrimaryContactEmail();
    console.log(this.getPrimaryContactEmail());
    console.log('onContactClicked engaged on: ' + new Date());
    // Create dialog
    let dialogRef: MdDialogRef<EnrollingProcessComponent>
        = this.dialog.open(EnrollingProcessComponent, {disableClose: true});
}

如何將getPrimaryContactEmail（）的結果從原始組件傳遞到對話框打開時觸發的組件，這是一個電子郵件地址？

Answer 1

您可以通過MdDialogConfig選項的data屬性將值傳遞給組件實例，如下所示：

primaryContactEmail = this.getPrimaryContactEmail();

let dialogRef: MdDialogRef<EnrollingProcessComponent>
    = this.dialog.open(EnrollingProcessComponent, {
            disableClose: true,
            data: { primaryContactEmail: primaryContactEmail }
        });

然后，您將需要注入MD_DIALOG_DATA到組件EnrollingProcessComponent組件，這將允許您訪問任何傳送的數據，在這種情況下，命名屬性primaryContactEmail ：

import {MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'example-dialog',
  templateUrl: 'example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(
      public dialogRef: MdDialogRef<DialogResultExampleDialog>, 
      @Inject(MD_DIALOG_DATA) public data: any) {
      console.log(this.data);
      console.log(this.data.primaryContactEmail);
  }
}

這是一個展示功能的plunker 。 打開對話框時檢查控制台以查看可記錄的數據。

如果需要將值傳遞回父組件，可以使用md-dialog-close或close()來傳遞值。

我添加了通過close(value: any)從組件中關閉對話框並將值傳遞給父調用組件。 忽略加載時的初始錯誤，這些錯誤存在於未更改的基本示例上。

希望這有幫助！