他のコンポーネント内のコンポーネントテンプレート

Question

私は、主要コンポーネントに格納されたコンポーネントの配列を持っています。彼らはさまざまな種類のものです。私はそれらをすべて表示するためにngForおよびngSwitchディレクティブを使用しました。

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

このアプローチは、新しいタイプを追加するとかなり問題になります。 ComponentX、beacuse別のngSwitchケースを追加する必要があります。より一般的にする可能性はありますか？

Answer 1

私は、あなたが達成しようとしていることに応じて3つの解決策を持っています。

1. ngSwitchステートメントを削除し、各コンポーネントのテンプレートを*ngIfステートメントで囲みます。表示されるデータ（つまり、あなたのswicthステートメントで使用されているロジック）を判断するために、観測可能なデータを格納するサービスを作成する必要があります。そのデータをそれぞれに注入します。
2. 角度ルータもオプションです。
3. （私はこれが最善の解決策と思われます）コンポーネントのリストの長さによっては、すべてをリストし、それぞれに*ngIfを追加して、コンポーネントのロジックを維持することができます。

アレイ内のコンポーネントの順序は重要ですか？また、いくつのコンポーネントがありますか？