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＆amp; name是组件@inputs

Answer 1

<击> 据我所知，这有效了一段时间

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

<击>

尝试实施它但未完成。

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

Answer 2

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

我们可以采取什么措施来解决角度问题呢？

@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) {}
}

动态设置路由器插座名称

2 个答案: