时间戳

首页 > 解决方案 > 从单个模板角度动态创建组件

angular - 从单个模板角度动态创建组件

问题描述

我想知道是否有一种角度方法，可以在运行时从通用模板生成组件？

例如，如果我有一个小部件仪表板，后端服务器告诉我渲染了多少小部件，有没有办法为每个小部件创建一个组件并将它们作为子组件添加到父仪表板组件？

这甚至可能不是最好的方法，但出于好奇，我想知道这是否可能，如果是，这是否是一个好习惯。

我已经查看了角度的动态组件，但是您有一个预定义的组件（如模态），您可以在运行时加载/卸载它。

编辑：如果我需要显示小部件，我可以使用 ngFor/ngIf 构造，我想要组件的原因是我想做一堆其他任务，比如根据它是哪个小部件设置可观察对象。

标签： angulartypescriptangular-components

解决方案

好吧，最简单的解决方案是拥有一些固定的小部件，并使用来自后端的数据来渲染它们*ngFor，*ngIf即使这并不是一个完美的解决方案。

<div class='dashboard'>
    <ng-content *ngFor='let widget of widgets'>
        <ng-content *ngIf='widget.type == 1'><app-widget1></app-widget1></ng-content>
        ....
    </ng-content>
</div>

还有ComponentFactoryResolver可用于在运行时动态加载组件，如此处所述。自己没有尝试过，所以我无法提供示例，但指南上有示例代码，也许它符合您的需求。

推荐阅读