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