javascript - Angular 嵌套路由被主路由器导出移除

Question

我有一个应用程序，其中有标题和侧边栏。它看起来像这样:

#app.component.html
<mat-drawer-container class="sidenav-container">

    <app-side-nav></app-side-nav>

  <mat-drawer-content>
    <app-header></app-header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-drawer-content>
</mat-drawer-container>

路由配置是:

const routes: Routes = [
  { path: 'identity', loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule' }
];

现在，点击身份后，身份模块将在其中加载嵌套的导航菜单。身份模块有 3 个组件(IdentityRegistryComponent、MyIdentityComponent、UsersComponent)，并且有自己的路由配置。

const routes: Routes = [
  {
    path: '',
    component: IdentityRegistryComponent
  },
  {
    path: 'my-identity',
    component: MyIdentityComponent
  },
  {
    path: 'users',
    component: UsersComponent
  }
];

嵌套路由如下所示:

###IdentityRegistryComponent

<nav mat-tab-nav-bar>
  <a mat-tab-link [routerLink]="['./my-identity']">My Identity</a>

  <a mat-tab-link [routerLink]="['./users']">Users</a>
</nav>
<router-outlet></router-outlet>

但不幸的是，每当我点击身份时，它都会正确加载IdentityRegistryComponent。但是单击my-identity，消失嵌套路由并仅加载相应的组件。但事实不应该是这样的。嵌套循环应该存在，并且在单击 my-identity 时，它应该加载 router-outlet 上的相应组件。我不知道如何让它发挥作用？

此外，如果我从导航中单击身份，它会加载 IdentityRegistryComponent 并且默认情况下 MyIdentityComponent 将加载到嵌套路由区域中？

为了更好地理解，我添加了 git 链接: testApp

Answer 1

如果您想使用此模块的路由器导出，您需要为此“子”指定组件。

const routes: Routes = [{
  path: 'identity',
  component: AppComponent,
  loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule'
}];

如果您希望所有路由都使用相同的组件，您也可以像这样定义它:

const routes: Routes = [{
  path: '',
  component: AppComponent,
  children: [{
      path: 'identity',
      component: NestedNavComponent, // Add a component here for nested router-outlets
      loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule'
  },{
      path: 'another-route',
      loadChildren: './another-route/another-route.module#AnotherRouteModule'
  }]
}];

更新(查看我添加的嵌套组件引用):

路由是分层工作的，其中包括嵌套路由中的路由器导出。该应用程序是为子路由分层构建的。如果您考虑到这一点，您可以按照设计 ui 逻辑的方式定义子路由。