Mi plantilla de componente principal se ve así:
<app-navigation></app-navigation> <div class="container-fluid"> <router-outlet></router-outlet> </div>Y esta es la navegación:
<div > <a routerLink="/home" routerLinkActive="active" >Home</a> <a routerLink="/doctors" routerLinkActive="active" > Doctors </a> <a routerLink="/health" routerLinkActive="active" > Health </a> </div>app.routing.ts
export const appRoutes: Routes = [ { path: 'doctors', loadChildren: () => import('./doctore/doctore.module').then(m => m.DoctoreModule) }, { path: 'health', loadChildren: () => import('./health/health.module').then(m => m.HealthModule), }, { path: '**', component: NotFoundPageComponent } ]; Los componentes de médicos tienen una lista de médicos y, al seleccionar uno de ellos, la aplicación debe dirigirse a un componente secundario DoctorDetailsComponent , con la ruta doctors/{id}
<mat-cell [routerLink]="['/doctors', row.id]" routerLinkActive="active"> {{row.description}} </mat-cell>Si configuro el enrutamiento para que sea así:
{ path: 'doctors', loadChildren: () => import('./docspace/docspace.module').then(m => m.DocspaceModule), children: [{path: ':id', component: DoctorsDetailsComponent}] },me sale un error:
Configuración no válida de la ruta 'médicos': los niños y loadChildren no se pueden usar juntos
Si DoctorsDetailsComponent está dentro DocspaceModule Entonces
{ path: 'doctors', loadChildren: () => import('./docspace/docspace.module').then(m => m.DocspaceModule), }, y en DocspaceRoutingModule
const routes: Routes = [ { path: '', component: DoctorSpaceComponent, children: [ { path: '', redirectTo: ':id', pathMatch: 'full' } { path: ':id', component: DoctorsDetailsComponent } ] } ];DoctorSpaceComponent.html
<router-outlet></router-outlet>Lo manejé en los ts de enrutamiento del módulo específico.