Javascript 通过用于触发对话框覆盖的函数在角度组件之间传递值

在我的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});
}

primaryContactEmail = this.getPrimaryContactEmail();

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

public onContactClicked（主要联系人电子邮件）：无效{
primaryContactEmail=this.getPrimaryContactEmail（）；
log（this.getPrimaryContactEmail（））；
console.log（'onContactClickedEngaged:'+newDate（））；
//创建对话框
让dialogRef:MdDialogRef
=this.dialog.open（EnrollingProcessComponent，{disableClose:true}）；
}

---

如何将getPrimaryContactEmail（）的结果（即电子邮件地址）从原始组件传递到对话框打开时激发的组件？

您可以通过

MdDialogConfig

的

data

属性将值传递到组件实例，如下所示：

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});
}

primaryContactEmail = this.getPrimaryContactEmail();

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

下面是一个演示功能的示例。打开对话框时，请检查控制台以查看可记录的数据

如果需要将值传回父组件，可以使用

md dialog close

或

close（）

将值传回

我添加了通过

close（value:any）

从组件内部关闭对话框，并将值传递给父调用组件。忽略加载时的初始错误，这些错误出现在基本不变的示例中

---

希望这有帮助

您可以从原始组件发出一个事件，让两个组件的父组件捕获它，然后向下传递数据。这不是父子关系，所以在这里不起作用。我理解这一点，但可能这两个组件都组成了另一个组件Nope。没有中间组件。为什么不能使用服务？这正是我要找的。谢谢