Question

我正在尝试为多个子级实现路由，但目前命名的路由器出口似乎仅适用于一级子级子级。我尝试了与第一级相同的方法来实现第二级，但是路线显示不匹配，并且只能在家导航。

路由模块结构

  {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

Answer 1

首先，我看不到需要使用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},
        ]
      },
    ]
  }
];

路由

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

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

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

Answer 2

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

上附加父/子路由。

现在，角度用户将知道父级并正确读取了路由-每次调用子级路由时，都不要忘记用父级路由映射路由名称

希望这种方法行得通-请检查

编码愉快！！

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

2 个答案:

路线

路由