Question

我试图归档Material Dialog的功能。我想创建父弹出组件，其中包含我在我的应用程序中使用的所有弹出窗口。结构看起来像这样

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

在其他组件中，我像这样调用parent-popup-component

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>

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

Answer 1

你可以根据你得到的数据使用*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>

show子组件依赖于来自父级的数据

1 个答案: