路由器插座堆叠组件而不是替换它们

Question

我在组件内的路由器插座时遇到了一些问题。我有一个带有不同路由器链接的sidenav，当点击时，routeroutlet显示了应该的组件，但不会删除前一个组件，只是将它们叠加在一起。

＆＃13;

＆＃13;

RouterModule.forRoot([
      {
        path: 'admLocaciones',
        component: AdmLocacionesComponent
      },
      {
        path: '',
        redirectTo: '/inicio',
        pathMatch: 'full'
      },
      {
        path: 'inicio',
        component: InicioComponent
      },
      {
        path: 'buscarLocacion/:id',
        component: BuscarLocacionComponent
      },
      {
        path: 'editarLocacion/:id',
        component: EditarLocacionComponent
      },
      {
        path: 'nuevaLocacion',
        component: NuevaLocacionComponent
      },
      {
        path: 'admRegiones',
        component: AdmRegionesComponent
      },
      {
        path: 'locacion/:id',
        component: LocacionComponent
      },
      {
        path: 'tableroTanque',
        component: TableroTanqueComponent
      },
      {
        path: 'tanque/:id',
        component: TanqueComponent,
        children: [
          {
            path: '',
            redirectTo: 'informacion-general',
            pathMatch: 'full'
          },
          {
            path: 'informacion-general',
            component: TanqueInfoGeneralComponent
          },
          {
            path: 'datos-tecnicos',
            component: TanqueDatosTecnicosComponent
          },
          {
            path: 'lavado',
            component: TanqueLavadoComponent
          },
          {
            path: 'revestimiento',
            component: TanqueRevesimientoComponent
          },
          {
              path: 'inspecciones',
              component: TanqueInspeccionesComponent
          },
          {
              path: 'reparaciones-modificaciones',
              component: TanqueReparacionesModificacionesComponent
          },
          {
            path: 'auditoria',
            component: TanqueAuditoriaComponent
          },
          {
            path: 'puesta-a-tierra',
            component: PuestaTierraComponent
          }
        ]
      }
    ])
  ],

＆＃13;

.list-container {
  padding-top: 66px;
  background: #0D47A1;
  min-height: 100vh;
  width: 15%;
  position: fixed;
}

.list-container li {
  padding: 20px 10px;
}

.content-container {
  padding: 66px 20px;
  width: 85%;
  margin-left: 15%;
}

＆＃13;

<div class="list-container col s4 left">
  <ul>
    <li class="lc-t-link link" [routerLink]="['informacion-general']">Informacion General</li>
    <li class="lc-t-link link" [routerLink]="['datos-tecnicos']">Datos tecnicos</li>
    <li class="lc-t-link link" [routerLink]="['lavado']">Lavado del tanque</li>
    <li class="lc-t-link link" [routerLink]="['revestimiento']">Revestimiento</li>
    <li class="lc-t-link link" [routerLink]="['inspecciones']">Inspecciones</li>
    <li class="lc-t-link link" [routerLink]="['reparaciones-modificaciones']">Reparaciones y modificaciones</li>
    <li class="lc-t-link link" [routerLink]="['auditoria']">Auditoría 785/266</li>
    <li class="lc-t-link link" [routerLink]="['puesta-a-tierra']">Control de puesta a tierra</li>
    <li class="lc-t-link link">Instrumentación y control</li>
  </ul>
</div>

<div class="content-container col s8 left">
  <router-outlet></router-outlet>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您需要更多信息，请提出要求。 谢谢你的帮助。