Angular - Liste mit verschiedenen Komponenten

Question

Ich möchte eine Wand machen, und ich habe 3 verschiedene Wandpfosten Arten.

• Text
• Fotos
• Video

Was ist die beste Praxis? 3 verschiedene Komponenten, oder 1 Komponente mit 3 Gehäusen innen?

Wie kann ich die richtige Komponente in meinem * ngFor auswählen?

<div *ngFor="let post of posts"> 
    <text-post *ngIf="post.type == 1"></text-post> 
    <photo-post *ngIf="post.type == 2"></photo-post> 
    <video-post *ngIf="post.type == 3"></video-post> 
</div> 

Answer 1

Ich würde für eine Komponente mit einer ngSwitch drin gehen.

So könnte man so etwas wie dies zum Beispiel tun:

<div *ngFor="let post of posts"> 
    <ng-container [ngSwitch]="post.type"> 
     <text-post *ngSwitchCase="1"></text-post> 
     <photo-post *ngSwitchCase="2"></photo-post> 
     <video-post *ngSwitchCase="3"></video-post> 
    </ng-container> 
</div> 

ng-container ist ein Element, das nicht in dem DOM gemacht bekommt und daher nicht mit dem Layout der Seite nicht stört.