mardi 26 septembre 2017

router outlet stacks components instead of replacing them

i am having some trouble with a router outlet inside a component. I have a sidenav with diferent routerlinks and when clicked the routeroutlet displays the component that's supposed to, but wont remove the previous one, just stacks them on top of each other.

enter image description here

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
          }
        ]
      }
    ])
  ],
.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%;
}
<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>

If you need any more information just ask for it. Thanks for your help.




Aucun commentaire:

Enregistrer un commentaire