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' }
] },
...

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

现在，在我的wall-handler.component.html文件中，我有一个辅助/名为<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

事实证明，根本不需要$.ajax({ url: yourUrl, type: "GET", dataType: "json", data: null, success: function (response) { console.log("RESULT:" + JSON.stringify(response)); var json = JSON.parse(response); }, error: function (response) { console.log("ERROR:" + JSON.stringify(response)); } }); - 相关细节：

路由文件：

outlet

HTML文件：

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

打字稿文件：

...
<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: any[] }[] { return [ { label: 'Recent', path: 'recent' }, { label: 'Ranking', path: 'ranking' } ]; } ...，因为它已经位于指定的组件中，以便路由文件包含子组件。

Angular 2/4子路由，嵌套路由器插座

1 个答案: