Почему дочерний маршрут не отображается при переходе к нему?

У меня следующие маршруты:

{path: 'group/:groupId', component: GroupComponent, data: {state: 'group'},
 children: [
   {path: 'voting/:votingId', component: VotingComponent, data: {state: 'voting'}, children: [
       {path: '', redirectTo: 'vote', pathMatch: 'full'},
       {path: 'vote', component: VoteComponent, data: {state: 'vote'}},
       {path: 'favorite-places', component: FavoritePlacesComponent, data: {state: 'favorite-places'}}
   ]}
 ]
},

Однако по какой-то причине дочерние маршруты не отображаются.

Если я перейду от https: // локальный: 4200 / # / группа / 1 к https: // localhost: 4200 / # / группа / 1 / голосование / 1 / голосование, компонент не будет отображаться.

Что действительно работает, так это отображение /group/1/voting/1/vote во вложенном router-outler, но это не то, что я хочу. Я хочу, чтобы он отображался в розетке маршрутизатора "Текущий".

Это основной макет приложения:

<div class="main" [@applicationTransition]="applicationState">

  <nav class="header" [@headerTransition]="currentHeaderView">
    <div class="header-container">
      <ng-container #vcr></ng-container>
    </div>
  </nav>

  <main class="content" [@contentTransition]="openCloseState">
    <router-outlet #o="outlet"></router-outlet>
  </main>

</div>

Как я могу это исправить?

У вас есть ошибки в консоли? Можете ли вы воспроизводить с помощью минимальный воспроизводимый пример на StackBlitz?

Narm 10.08.2018 17:35
0
1
40
2

Ответы 2

То, что вы там написали, похоже, правильно. Используете ли вы какой-либо посредник для перехвата действия маршрута, чтобы отправить действие вашему магазину? Причина, по которой я спрашиваю, заключается в том, что когда маршрутизатор разрешает элемент данных, который у вас есть, он использует имя элемента, чтобы решить, нужно ли ему его хранить. Если у него есть элемент, которого он раньше не видел, он добавит его в коллекцию данных на RouterState. Если у него такое же имя, он обновит этот элемент. Я не вижу, где вы разрешаете свои параметры здесь, в коде. Пример моего кода, который имеет такое же количество детей, которые работают ...

{
    path: 'batches/:batchId',
    resolve: { item: BatchResolver },
    data: {
      breadcrumb: 'Batches',
    },
    children: [
      { path: '', redirectTo: 'edit', pathMatch: 'full' },
      {
        path: 'edit',
        component: BatchDetailsComponent,
        resolve: { breadcrumb: BatchBreadcrumbResolver },
      },
      {
        path: 'childbatches',
        component: BatchListComponent,
        resolve: { data: BatchChildBatchesResolver },
      },
      { path: 'childbatches/new', component: BatchAddComponent },
      {
        path: 'childbatches/:childbatchesId',
        children: [
          { path: '', redirectTo: 'edit', pathMatch: 'full' },
          { path: 'edit', component: BatchDetailsComponent },
          { path: 'childbatches/new', component: BatchAddComponent },
        ],
        resolve: { item: BatchResolver },
      },
    ],
  },`

Попробуйте удалить компонент из маршрута voting/:votingid и сделать его «безкомпонентным» маршрутом.

{path: 'group/:groupId', component: GroupComponent, data: {state: 'group'},
 children: [
   {path: 'voting/:votingId', data: {state: 'voting'}, children: [
       {path: '', redirectTo: 'vote', pathMatch: 'full'},
       {path: 'vote', component: VoteComponent, data: {state: 'vote'}},
       {path: 'favorite-places', component: FavoritePlacesComponent, data: {state: 'favorite-places'}}
   ]}
 ]
},

Затем дети должны отобразить в соответствующей розетке роутера.

Другие вопросы по теме