angular - 单击时将值传递给多个组件

Question

我有 2 个组件被调用list，details它们的放置方式如下：

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

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

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

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

Stackblitz演示

更新了 Stackblitz演示

标签： angulartypescriptangular-materialangular6

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工作演示

官方文档