Approche du composant dynamique partiel Angular2

Question

J'ai besoin de créer une page HTML dynamique (le contenu & ordre sont générés en cours d'exécution). Je vais générer 2 composants angulaires en fonction de la réponse du serveur (json).

J'ai vu que je peux utiliser l'approche ComponentFactoryResolver. il a l'air massif et petit hacky.

Alors je pensais à l'idée suivante:

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 est un tableau reçu du serveur.

Quelles sont les implications de l'utilisation de cette approche? Est-ce une mauvaise pratique?

Answer 1

Felt ce qui est bon

<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>