3

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

此外，由于多个实例可能会导致问题，我不会在这里讨论，我们没有使用服务来获取和共享组件之间的数据。所以我也不能注入服务来在对话框组件（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() 的结果（一个电子邮件地址）从原始组件传递到对话框打开时触发的组件？

4

1 回答 1

2

您可以通过选项的data属性将值传递给组件实例，MdDialogConfig如下所示：

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

希望这会有所帮助！

于 2017-07-14T19:51:38.667 回答