使用命名路由器出口实现多个子路由答案

【问题标题】：Implementing Multiple Child routes with named router-outlets使用命名路由器出口实现多个子路由
【发布时间】：2018-11-07 17:36:40
【问题描述】：

我正在尝试为多个子级实现路由，但目前命名的路由器插座似乎仅适用于一级子级层次结构。我尝试了与一级相同的方法来实现二级，但路线显示不匹配并按家导航。

路由模块结构

  {path: '_root', component: AppComponent},
  {path: 'AfterLoginParent', component: AfterLoginRootComponent,
  children: [
    { path: '_Home', component: AfterLoginHomeComponent, outlet: 'afterRoot'},
    { path: '_MyTeam', component: MyTeamComponent, outlet: 'afterRoot',
    children: [
      { path: '_Players', component: MyTeamPlayersComponent, outlet: 'team'},
      { path: '_Status', component: MyTeamStatusComponent, outlet: 'team'},
    ]},

我是如何实现一级层次结构的

  this.router.navigate(['/AfterLoginParent', { outlets: { 'afterRoot': ['_MyTeam'] }}]);

然后在 MyTeamComponent 的 ngOnInit() 中

 this.router.navigate(['/_MyTeam', { outlets: { 'team': ['_Players'] }}]);

但它似乎根本没有路由到这个二级。

我正在使用 Angular 7

【问题讨论】：

你的<router-outlet>在哪里？
<router-outlet> 在 App 组件中，<router-outlet name='afterRoot'> 在 AfterLoginParent 组件中，<router-outlet name='team'> 在 MyTeam 组件中。附editor@SunilSingh

标签： angular routing angular7

【解决方案1】：

首先，我看不到任何需要使用namedoutlet 的情况。你让它变得不必要的复杂。根据您的情况，您只需要处理嵌套路由。您当前的配置几乎不需要清理，其余的一切看起来都很好。

路线

const routes: Routes = [
  { path: '_root', component: AppComponent },
  {
    path: 'AfterLoginParent', component: AfterLoginRootComponent,
    children: [
      { path: '_Home', component: AfterLoginHomeComponent },
      {
        path: '_MyTeam', component: MyTeamComponent, children: [
          { path: '_Players', component: MyTeamPlayersComponent},
          { path: '_Status', component: MyteamStatusComponent},
        ]
      },
    ]
  }
];

路由

路由器链接可以相对做。例如：

<a [routerLink]="['_Home']">Home</a>
<a [routerLink]="['_MyTeam']">My Team</a>

您修改后的演示在这里 - https://stackblitz.com/edit/angular-xyjmve

【讨论】：

效果很好 :) 谢谢！

【解决方案2】：

_MyTeam 是 AfterLoginParent 的子路由，因此您需要将父/子路由附加到 - this.router.navigate(['/AfterLoginParent/_MyTeam', { outlets: { 'team': ['_Players'] }}]);

现在 angular 将知道父路由并正确读取路由 - 每次当您调用子路由时，不要忘记将路由名称与其父路由映射

希望这种方法可行 - 请检查

编码愉快！！

【讨论】：

我按照您的建议进行了尝试，但没有成功。我附上了一个 repo 供您查看：repo。有没有办法解决这个问题？