Question

我有以下路线：

{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://localhost:4200/#/group/1导航到https://localhost:4200/#/group/1/voting/1/vote，则不会显示该组件。

有效的方法是在嵌套的/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>

我该如何解决？

Answer 1

您在此处写的内容看起来是正确的。您是否正在使用任何类型的中间人来拦截路线操作，以便向您的商店发出操作？我问的原因是当路由器解析您在其中使用的数据元素时，它使用元素的名称来决定是否需要保留它。如果它具有以前从未见过的元素，它将把它附加到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 },
      },
    ],
  },`

Answer 2

尝试从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'}}
   ]}
 ]
},

然后，孩子们应该显示在适当的路由器插座中。

为什么导航到子路线时不显示子路线？

2 个答案: