Angular2 Partial Dynamic Component Ansatz

Question

Ich muss eine dynamische HTML-Seite erstellen (Inhalt & Reihenfolge werden in der Laufzeit generiert). Ich werde Winkel 2 Komponenten nach Server-Antwort (JSON) generieren.

Ich sah, dass ich den ComponentFactoryResolver-Ansatz nehmen kann. es sieht massig und wenig hacky aus.

Ich dachte dann über die folgende Idee:

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 ist Array vom Server empfangen.

Welche Auswirkungen hat die Verwendung dieses Ansatzes? Ist es eine schlechte Übung?

Answer 1

Filz so gut ist

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