单击时将值传递给多个组件[关闭]答案

【问题标题】：Passing the values to multiple components on click [closed]单击时将值传递给多个组件[关闭]
【发布时间】：2019-05-08 00:50:28
【问题描述】：

我有两个名为 list 和 details 的组件，它们的放置方式如下：

list 拥有客户列表，details 用于显示特定客户的详细信息（即姓名、年龄......），如图所示。

如图所示，details 组件中有一个名为 edit 的按钮，单击此按钮后，我在对话框窗口中调用了一个名为 edit 的组件。

在edit 组件中。我想显示在display 组件上显示的相同数据（即姓名、年龄...）。像这样：

为了执行CRUD操作。我已经尝试按照details 组件中给出的输入。但我无法做到这一点。

Stackblitz DEMO

更新 Stackblitz DEMO

【问题讨论】：

标签： angular typescript angular-material angular6

【解决方案1】：

你可以在这里使用MAT_DIALOG_DATA 类似

更改 openDialog 方法以将数据传递给对话框

 public openDialog(): void {
    const dialogRef: MatDialogRef<EditComponent> = this.dialog.open(EditComponent, {
      width: '61.6vw',   height: '100vh', position: { right: '0'},data:this.contact
    });
  }

然后在编辑组件中注入 MAT_DIALOG_DATA

constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

并在您的编辑组件 html 中将值绑定到此数据 Working demo

Official doc

【讨论】：

我的要求变化不大：我使用details 组件作为通用组件。所以我在customer 组件中编写代码来打开对话框窗口。请查看更新后的链接。并做出改变。
stackblitz.com/edit/list-examples-mine-hghiie

【解决方案2】：

创建一个共享服务（比如全球服务）。然后传递所选联系人的值，如

<button mat-stroked-button (click)="openDialog(contact)" >Edit</button>

现在里面让你像openDiaglo函数

public openDialog(con:any): void {
    this.global.name = contact.name;
    rhis.global.age = contact.age;
    const dialogRef: MatDialogRef<EditComponent> = this.dialog.open(EditComponent, {
    width: '61.6vw',   height: '100vh', position: { right: '0'},
    });
  }

现在在编辑组件中，您可以将global.name 和global.age 值分配给局部变量。

【讨论】：