Именованный роутер-розетка во вложенном потомке не загружается

Я назвал маршрутизатор-выход в основном маршрутизаторе-выходе, который не загружается при навигации.

В моем шаблоне app.ts у меня есть:

<router-outlet></router-outlet>   <!-- Contains the parent-->
<router-outlet name="aux1"></router-outlet></div>  <!-- Works Fine -->

В моем родительском шаблоне у меня есть:

<router-outlet></router-outlet>
<router-outlet name="aux2"></router-outlet><!-- Does not Work! -->

Моя маршрутизация для основного пути находится здесь:

const appRoutes: Routes = [
{
    path: '',
    component: ParentComponent,
    children: [
      {
        path: '',
        component: ChildAComponent
      }
    ]
}];

И моя маршрутизация для вспомогательного выхода здесь:

 { // It has no problems navigating to this route, but does not update UI
    path: 'show-child-b',
    component: ChildBComponent,
    outlet: 'aux2'
  },
  { // Works fine
    path: 'show-sibling-c',
    component: SiblingCComponent,
    outlet: 'aux1'
  }

Когда я перехожу к выходу aux2 с помощью this.router.navigate([{outlets: {aux2: 'show-child-b'}}]);, он не может обновить дочерний router-outlet.

Вот плункер, показывающий проблему: https://next.plnkr.co/edit/Qalj52P8VOEUnioU?open=lib%2Fapp.ts&deferRun=1

Что мне нужно сделать, чтобы это заработало?


angular router-outlet angular6
person Andres    schedule 22.08.2018    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Я заставил его работать, указав явные имена для путей вместо пути по умолчанию и выбрав «родительский» в качестве первого параметра.

I.E.:

const appRoutes: Routes = [
{
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'childA',
        component: ChildAComponent
      }
    ]
}];

А также

this.router.navigate(['parent',{outlets: {aux2: 'show-child-b'}}]);
person Andres    schedule 23.08.2018