实现多个 Child 路由，命名为 router-outlets

Question

我正在尝试为多个 children 实现路由，但目前命名的 router-outlet 似乎只适用于 children 的 level-one 层次结构。我尝试了与 level-one 相同的方法来实现 level-two 但路线显示不匹配并按家导航。

路由模块结构

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

我是如何实现 level-one 层次结构的

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

然后在 MyTeamComponent 的 ngOnInit()

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

但它似乎根本没有路由到这个 level-two。

我在 Angular 7

Answer 1

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

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

希望这种方法有效 - 请检查

编码愉快!!

Answer 2

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

路线

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},
        ]
      },
    ]
  }
];

路由

Router link相对可以做到。例如：

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

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

实现多个 Child 路由，命名为 router-outlets

Implementing Multiple Child routes with named router-outlets

routing

angular

angular7

路线

路由