通过触发对话框叠加功能在角度组件之间传递值

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)从组件中关闭对话框并将值传递给父调用组件。 忽略加载时的初始错误，这些错误存在于未更改的基本示例上。

希望这有帮助！