angular - Angular2 部分动态组件方法

Question

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

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

然后我在考虑以下想法：

动态的.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>