动态设置路由器插座名称

Question

是否可以以角度2动态设置路由器插座的名称？我需要创建一个包含路由器插座的通用组件.

模板示例:

<nav class="nav menu">
    <a *ngFor="let navRoute of navigationRoutes" class="nav-link" [class.selected]="navRoute.isActive" (click)="onActivated(navRoute.route)">{{navRoute.header}}</a>
</nav>
<router-outlet name=[[DO SOME BINDING HERE]]></router-outlet>

navigationRoutes和name是组件@inputs

Answer 1

这太令人沮丧了。我真的希望我们能找到一个真正的解决方案。这是我的可怕的黑客攻击，它在这种情况下有效，因为我只有三个出口：a、b 和 c。我的用例是我有一个带有辅助 url 和子路由的三面板系统。如果我的系统中有任意数量的命名插座，或者路由器插座名称可以动态更改，那么我的“解决方案”就会失败。

我们可以做些什么来解决 Angular 的问题？

@Component({
  selector: 'my-router-outlet',
  template: `
    <router-outlet 
      *ngIf="route.outlet === 'a'"
      name="a"
    ></router-outlet>
    <router-outlet 
      *ngIf="route.outlet === 'b'"
      name="b"
    ></router-outlet>
    <router-outlet 
      *ngIf="route.outlet === 'c'"
      name="c"
    ></router-outlet>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RouterOutletComponent {
  constructor(public route: ActivatedRoute) {}
}

Answer 2

据我所知，这已经有一段时间了

<router-outlet [name]="propertyWithOutletName"></router-outlet>

有人尝试实施它，但没有完成。

https://github.com/angular/angular/pull/12550