angular - angularのループ内でルーターアウトレットを使用する

Question

私は非常にトリッキーな状況に直面しています。アプリケーション内のさまざまなコンポーネントにマップされる複数のルートを定義しました。<router-outlet>通常のシナリオでは問題にならない特定のルートに対応するコンポーネントをロードしたい。しかし今回は、<router-outlet>以下のコードのように、カスタムメイドのリスト コンポーネント内で を使用したいと考えています。これにより、複数のインスタンスが作成<router-outlet>され、問題が発生し、コンポーネントがロードされません。

<list*ngFor="let cat of settings">
  <list-item *ngFor="let item of cat.items" 
      [routerLink]="cat.route + item.route" queryParamsHandling="merge">
    <router-outlet></router-outlet>
  </list-item>
</list>

以下のコードは問題なく動作します。ただし、コンポーネントはリストコンポーネントの外にロードされます。これは望ましくありません。

<list*ngFor="let cat of settings">
  <list-item *ngFor="let item of cat.items" 
     [routerLink]="cat.route + item.route" queryParamsHandling="merge">
  </list-item>
</list>
<router-outlet></router-outlet>

以下のコードも問題なく動作します。しかし今回は、ルートに基づいてコンポーネントを動的にロードする機能を失いました。すべて同じコンポーネントがロードされます。

<list*ngFor="let cat of settings">
  <list-item *ngFor="let item of cat.items" 
     [routerLink]="cat.route + item.route" queryParamsHandling="merge">
    <custom-component></custom-component>
  </list-item>
</list>

または、ルートに基づいてコンポーネントを動的に把握し、テンプレートに挿入する方法があります。