点击将值传递给多个组件

Question

我有两个名为list和details的组件，它们像这样放置：

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

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

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

为了执行CRUD操作。我已经尝试通过details组件中的给定输入来进行输入。但是我无法实现这一点。

Stackblitz DEMO

更新后的Stackblitz DEMO

Answer 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

Answer 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的值分配给局部变量。