时间戳

首页 > 解决方案 > 为什么导航到子路线时不显示？

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

问题描述

我有以下路线：

{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>

我怎样才能解决这个问题？

标签： angular

解决方案

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

推荐阅读