角度加载动态 HTML 组件

Posted

技术标签:

【中文标题】角度加载动态 HTML 组件【英文标题】:Angular load dynamic HTML component 【发布时间】:2022-01-04 06:49:59 【问题描述】:

我必须为 Angular 应用程序创建两个不同的主题。每个主题都需要根据 API 调用的属性进行加载。我想创建两个使用相同 .ts 代码的 html 文件,因为功能将保持不变。

什么是实现此功能的最佳方法。现在这个实现是在 .html 中使用 ngSwitch 实现的

enter image description here

【问题讨论】:

这能解决你的问题吗?***.com/questions/46235412/… 请提供足够的代码,以便其他人更好地理解或重现问题。 【参考方案1】:

创建两个不同的展示组件。将数据从父组件传递给这些组件。使用 ngIf 在组件之间切换。

<presentation-component-one *ngIf="isThemeOne" [data]="data"></presentation-component-one>
<presentation-component-two *ngIf="isThemeTwo" [data]="data"></presentation-component-two>

【讨论】:

以上是关于角度加载动态 HTML 组件的主要内容,如果未能解决你的问题,请参考以下文章

根据用户输入以角度 5+ 加载动态组件

角度动态组件加载 - ExpressionChangedAfterItHasBeenCheckedError

何时为动态加载的角度组件触发 OnInit 事件?

如何以角度动态删除组件

角度 5 延迟加载与动态加载

在html模板角度2中动态设置组件的属性