在成角度的环路中使用路由器出口

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>

或者有一种简单的方法可以基于路由动态地确定组件并注入模板中。

Answer 1

在ngFor中，您可以使用first：布尔值，对于要循环播放的第一项是正确的。这将是一次显示路由器插座的方法：

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