1

我正面临一个非常棘手的情况。我已经定义了多个路由，这些路由映射到我的应用程序中的不同组件。我想加载与给定路线相对应的组件，<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>

或者是否有一种简单的方法可以根据路由动态找出组件并注入模板。

4

0 回答 0