Angular2 部分动态组件方法

Question

我需要构建一个动态 html 页面（内容和顺序在运行时间内生成）。我将根据服务器响应(json)生成angular 2个组件。

我看到我可以采用 ComponentFactoryResolver 方法。它看起来笨重又有点笨拙。

然后我在想下面的想法：

dynamic.component.html:

<div *ngFor="let item of dynamicItems">
  <div [ngSwitch]="item.type">
    <template [ngSwitchCase]="component1">
       <component1 [data]="item.data"></component1>
    </template>
    <template [ngSwitchCase]="component2">
       <component2 [data]="item.data"></component2>
    </template>
    <template [ngSwitchCase]="component3">
       <component3 [data]="item.data"></component3>
    </template>¯
    <template [ngSwitchCase]="component4">
       <component4 [data]="item.data"></component4>
    </template>
  </div>
</div>

dynamicItems 是从服务器接收到的数组。

使用这种方法有什么影响？这是不好的做法吗？

Answer 1

觉得这个不错

<div *ngFor="let item of dynamicItems">
 <component1 *ngIf="item.type=='component1'" [data]="item.data"></component1>
 <component2 *ngIf="item.type=='component2'" [data]="item.data"></component2>
 <component3 *ngIf="item.type=='component3'" [data]="item.data"></component3>
 <component4 *ngIf="item.type=='component4'" [data]="item.data"></component4>
</div>

Angular2 部分动态组件方法

Angular2 Partial Dynamic Component approach

dynamic-html

angular-components

angular-factory

angular