Angular 以角度显示子组件依赖于来自父组件的数据

我正在尝试归档“材质”对话框的功能。我想制作父弹出窗口组件，它包含我在应用程序中使用的所有弹出窗口。 结构看起来像这样

parent-popup-component 
|
| - popup1
| - popup2
| - popup3
...component.ts ...component.html

const dialogRef = this.dialog.open(ParentPopupComponent, {
  data: { dialogName: 'popup1' },
});

在其他组件中，我称之为父弹出组件，如下所示

parent-popup-component 
|
| - popup1
| - popup2
| - popup3
...component.ts ...component.html

const dialogRef = this.dialog.open(ParentPopupComponent, {
  data: { dialogName: 'popup1' },
});

在parent-popup.component.html中，我存储所有弹出窗口，并将带有所需弹出窗口名称的数据对象传递给子弹出窗口

<popup1 [data]='data'></popup1>
<popup2 [data]='data'></popup2>
<popup3 [data]='data'></popup3>

---

当我打电话时，如何在父弹出窗口中显示子弹出窗口模板

您只需使用

*ngIf

在这样获得的数据的基础上实现它-

<popup1 [data]='data' *ngIf="data.dialogName == 'popup1'"></popup1>
<popup2 [data]='data' *ngIf="data.dialogName == 'popup2'"></popup2>
<popup3 [data]='data' *ngIf="data.dialogName == 'popup3'"></popup3>

---

情况确实如此，但如果我有大约200个弹出窗口模板，是否可以只将数据传递给子弹出窗口并可能返回一些内容？