时间戳

首页 > 解决方案 > 显示子组件依赖于来自父级的数据

angular - 显示子组件依赖于来自父级的数据

问题描述

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

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>

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

标签： angularangular-material

解决方案

你可以简单地*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>

推荐阅读