Реализация множественных дочерних маршрутов с именованными маршрутизаторами

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's 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'] }}]);

Теперь angular будет знать родителя и правильно читать маршрут - каждый раз, когда вы вызываете дочерний маршрут, не забудьте сопоставить имя маршрута с его родительским маршрутом

Надеюсь, этот подход сработает - пожалуйста, проверьте

Удачного кодирования !!