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' }
];

现在，单击标识identity module将在其中加载嵌套的导航菜单。身份模块具有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逻辑的相同方式定义子路由。

角嵌套路由由主路由器出口移除

1 个答案:

更新（请参阅我添加的嵌套组件参考）：