Komponente Vorlage in einer anderen Komponente

Question

Ich habe Array von Komponenten in der Hauptkomponente gespeichert. Sie sind von verschiedenen Arten. Ich habe die Anweisungen ngFor und ngSwitch verwendet, um sie alle anzuzeigen.

<div *ngFor="let component of components" 
     [ngSwitch]="component.id"> 
     <component-a *ngSwitchCase="1"></component-a> 
     <component-b *ngSwitchCase="2"></component-b> 
     <component-c *ngSwitchCase="3"></component-c> 
</div> 

Dieser Ansatz ist recht problematisch, wenn ich einen neuen Typ, z. ComponentX, weil ich einen weiteren ngSwitch-Fall hinzufügen muss. Gibt es eine Möglichkeit, es generischer zu machen?

Answer 1

Ich habe 3 Lösungen je nachdem, was es ist, dass you'r zu erreichen versuchen.

1. Drop die ngSwitch Aussagen und wickeln die Vorlage der einzelnen Komponenten in einer *ngIf Aussage. Sie müssen einen Dienst erstellen, der eine Observable der Daten enthält, die verwendet werden, um zu bestimmen, welche Show angezeigt wird (d. H. Die in Ihrer swicth-Anweisung verwendete Logik). Sie werden dann diese Daten in jeden injizieren.
2. Der eckige Router ist auch eine Option.
3. (Ich vermute, dies ist die beste Lösung) Je nachdem, wie lange die Liste der Komponenten ist, könnten Sie schreiben Sie sie einfach alle und eine *ngIf zu jeder hinzufügen und die Logik halten auf dem Bauteil.

Ist die Reihenfolge der Komponenten im Array überhaupt wichtig? Wie viele Komponenten gibt es?