角度8-路由器出口和/或命名路由器出口的内容并不总是显示

Question

请帮助我在下面固定点1、4和5。

1）在应用程序加载时渲染（不显示dossier-sidenav）：

2）如果我在导航栏中键入正确的网址，则会呈现（效果很好）：

3）在加载应用程序后单击第二个菜单时的渲染（效果很好）：

4）当我单击第二个菜单，然后单击第一个菜单时呈现（URL不正确，并且不显示主要的出口路由器内容）：

5）当我单击第二个菜单，然后单击第一个菜单，然后再次单击第二个菜单时呈现（不显示空位-sidenav）：

TestLibLayout /.../ shell.component.html：

<fps-navbar [sidenav]="sidenav">
  <ng-container fps-navbar-items>
    <ng-content select="[fps-navbar-items]"></ng-content>
  </ng-container>
  <ng-container fps-navbar-auth>
    <ng-content select="[fps-navbar-auth]"></ng-content>
  </ng-container>
  <ng-container fps-navbar-language>
    <ng-content select="[fps-navbar-language]"></ng-content>
  </ng-container>
</fps-navbar>

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #sidenav
    class="sidenav"
    [fixedInViewport]="false"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
  >
    <ng-container #content></ng-container>

    <router-outlet name="sidenav"></router-outlet>
  </mat-sidenav>

  <main>
    <router-outlet></router-outlet>
    <ng-component></ng-component>
  </main>
</mat-sidenav-container>

TestProject /.../ app.component.html：

<fps-shell>
  <ng-container fps-navbar-items>
    <a
      mat-button
      [routerLink]="['dossier', { outlets: { sidenav: ['dossier'] } }]"
      routerLinkActive="mat-accent"
    >
      {{ 'Employee.MyDossier.Title' | translate }}
    </a>
    <a
      mat-button
      [routerLink]="[
        { outlets: { primary: ['vacancies'], sidenav: ['vacancies'] } }
      ]"
      routerLinkActive="mat-accent"
    >
      {{ 'Vacancies.Title' | translate }}
    </a>
  </ng-container>
</fps-shell>

TestProject /.../ dossier-sidenav.component.html：

<mat-nav-list>
  <a
    mat-list-item
    [routerLink]="['personal-info']"
    routerLinkActive="router-link-active"
  >
    Personal info
  </a>
  <a
    mat-list-item
    [routerLink]="['career']"
    routerLinkActive="router-link-active"
  >
    Career
  </a>
  <a
    mat-list-item
    [routerLink]="['promotion']"
    routerLinkActive="router-link-active"
  >
    Promotion
  </a>
</mat-nav-list>

TestProject /.../ vacancies-sidenav.component.html：

<mat-nav-list>
  <a
    mat-list-item
    [routerLink]="['description']"
    routerLinkActive="router-link-active"
  >
    Description
  </a>
  <a
    mat-list-item
    [routerLink]="['vacancy']"
    routerLinkActive="router-link-active"
  >
    Vacancy
  </a>
  <a
    mat-list-item
    [routerLink]="['test']"
    routerLinkActive="router-link-active"
  >
    Test
  </a>
</mat-nav-list>

TestProject /.../ app.routes.ts：

export const routes: Routes = [
{
  path: 'dossier',
  loadChildren: () =>
  import('./my-dossier/my-dossier.module').then(m => m.MyDossierModule)
},
{
  path: 'vacancies',
  loadChildren: () =>
  import('./my-vacancies/my-vacancies.module').then(
    m => m.MyVacanciesModule
  )
},
{
  path: '404',
  component: NotFoundComponent
},
{
  path: '',
  redirectTo: 'dossier',
  pathMatch: 'full'
},
{ path: '**', redirectTo: '404' }
];

TestProject /.../ my-dossier.routes.ts：

export const routes: Routes = [
{
  path: '',
  component: MyDossierContainerComponent,
  children: [
  {
    path: 'personal-info',
    component: PersonalInfoContainerComponent,
    resolve: { info: PersonalInfoResolverService }
  },
  {
    path: 'career',
    component: CareerContainerComponent,
    resolve: { careerLines: CareerLinesResolverService }
  },
  {
    path: 'promotion',
    component: PromotionContainerComponent
  },
  {
    path: '',
    redirectTo: 'personal-info',
    pathMatch: 'full'
  }
]
},
{
  path: 'dossier',
  component: MyDossierSidenavComponent,
  outlet: 'sidenav'
}
];

TestProject /.../ my-vacancies.routes.ts：

export const routes: Routes = [
{
  path: '',
  component: VacancyListContainerComponent,
  resolve: { vacancies: VacancyListResolverService }
},
{
  path: 'vacancies',
  component: MyVacanciesSidenavComponent,
  outlet: 'sidenav'
},
{
  path: ':id',
  component: VacancyDetailContainerComponent,
  resolve: { vacancy: VacancyDetailResolverService }
}
];