javascript - 通过触发对话框覆盖的函数在 Angular 组件之间传递值

Question

在我的 Angular 应用程序中，我有一个具有打开对话框覆盖功能的组件。我试图弄清楚如何将一些数据从原始组件传递到此对话框组件 (EnrollingProcessComponent)。这不是父子关系，所以我不能在这里使用 Input() 或 [] 绑定(bind)。

此外，因为多个实例可能会导致问题，我不会在这里讨论，我们没有使用服务来获取和共享组件之间的数据。因此，我也无法注入(inject)服务以在对话框组件 (EnrollingProcessComponent) 中获取相同的实例。

所以，综上所述，我需要以某种方式将此数据(只是一个电子邮件地址)从原始组件传递到对话框组件。我假设我应该能够通过将它作为参数传递来做到这一点，但到目前为止我无法让它工作(即，当我在原始组件中控制台输出值时，我得到了值。但是当在对话框 (EnrollingProcessComponent) 组件中输出该值，我得到“未定义”。

我使用 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 }
        });

然后您需要注入(inject) 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) 从组件内关闭对话框并将值传递给父调用组件。忽略加载时的初始错误，这些错误出现在基本未更改的示例中。

希望对您有所帮助!