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

Question

I have a app in which I have a header and a sidebar. It looks like this:

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

And routing configuration is:

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

Now upon clicking on identity the identity module will load a nested nav menu within it. The identity module has 3 component (IdentityRegistryComponent,MyIdentityComponent, UsersComponent) and it has its own routing configuration.

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

and the nested route looks like this:

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

But unfortunately, whenever I click on identity, its load the IdentityRegistryComponent properly. But click on my-identity , disappear the nested routes and load the respective component only. But it should not be like that. The nested loop should be there and upon clicking on my-identity , it should load the respective component on router-outlet . I do not know how to make it working?

Besides, is there anyway that, if i click on identity from the nav, it will load the IdentityRegistryComponent and by default MyIdentityComponent will be loaded in a nested routes zone?

for better understanding, i have add the git link: testApp

Answer 1

If you want to use the router outlet for this module, you need to specify the component for this 'child'.

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

If you want all your routes to use the same component you can also define it like so:

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

Update ( See the nested component reference I added ):

Routes work hierarchical and that includes router-outlets in nested routes. The application is built in layers for child routes. If you consider that, you can define your child routes the same way as you designed your ui logic.