Angular 子路由，嵌套路由器插座

Question

我有一个带有 Angular Material 选项卡的 Angular 4 应用程序，我正在尝试使用选项卡式子路由。

我在我的主路由文件中定义了一些路由：

...
{ path: 'wall', component: WallHandlerComponent, canActivate: [LoggedGuard], children: [
    { path: '', redirectTo: 'recent', outlet: 'walloutlet' },
    { path: 'recent', component: RecentEventsComponent, outlet: 'walloutlet' },
    { path: 'ranking', component: RankingUsersComponent, outlet: 'walloutlet' }
] },
...

我在主 <router-outlet> 中加载 WallHandlerComponent 没问题。

现在，在我的 wall-handler.component.html 文件中，我有一个 secondary/named <router-outlet>:

...
<nav md-tab-nav-bar>
    <a md-tab-link
        *ngFor="let link of wallNavLinks"
        [routerLink]="link.path"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
    </a>
</nav>

<router-outlet name="walloutlet"></router-outlet>
...

而在我的 wall-handler.component.ts 中，我定义 wallNavLinks 如下：

...
get wallNavLinks(): { label: string, path: any[] }[] {
    return [
        { label: 'Recent', path: [{ outlets: { walloutlet: 'recent' } }] },
        { label: 'Ranking', path: [{ outlets: { walloutlet: 'ranking' } }] }
    ];
}
...

但是，当我加载 /wall 时，浏览器并没有在辅助 (walloutlet) 插座中加载任何内容，而是变得疯狂并挂起。

我做错了什么？

Answer 1

事实证明 outlet 相关的细节根本不需要：

路由文件：

...
{ path: 'wall', component: WallHandlerComponent, canActivate: [LoggedGuard], 
children: [
  { path: '', redirectTo: 'recent', pathMatch: 'full' },
  { path: 'recent', component: RecentEventsComponent },
  { path: 'ranking', component: RankingUsersComponent }
] },
...

HTML 文件:

...
<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of wallNavLinks"
    [routerLink]="link.path"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

<router-outlet name="walloutlet"></router-outlet>
...

打字稿文件：

...
get wallNavLinks(): { label: string, path: string }[] {
  return [
    { label: 'Recent', path: 'recent' },
    { label: 'Ranking', path: 'ranking' }
  ];
}
...

输出似乎自动向右移动<router-outlet>，因为它已经位于路由文件指定具有子组件的组件中。

Angular 子路由，嵌套路由器插座

Angular subrouting, nested router-outlets

angular-material

angular2-routing

angular