区分同一父级创建的两个Angular组件

Question

我有一个模态组件，只显示一条消息和一个accept button。

accept button将执行功能，具体取决于谁打给您。

同一组件可以创建多个模态（在不同的时刻显示）。

我的问题是要打开模式，必须通过其ID来调用它，但是所有模式都使用相同的ID创建。我曾想过通过@Input decorator来为每个ID创建一个唯一的ID，但是由于它是一个大型应用程序，所以两个开发人员可能会以相同的方式调用它并造成冲突。

我如何为每个元素创建唯一的ID，而不必将其作为@Input传递？

我尝试做一个例子，但是jquery有问题。

无论如何都在尝试

https://stackblitz.com/edit/angular-gvqdzc

Answer 1

我不完全理解您的问题，但是您可以将数据传递给对话框（在本例中为ID）。像这样的东西，

parent.component.ts

const dialogRef = this.dialog.open(DialogChacraFormComponent, {
      width: 500,
      maxHeight: 500,
      id: idx
});
dialogRef.afterClosed().subscribe(id => {
      doSomething(id);
});

dialog.component.ts

constructor(
    public dialogRef: MatDialogRef<DialogChacraFormComponent>,
    @Inject(MAT_DIALOG_DATA) public id: number
) { }
onAccept() {
    this.dialogRef.close(this.id);
}