Rutas hijas en Angular

Puede suceder que en un componente que ya está involucrado en el enrutamiento, también haya componentes hijos. Podemos hacer que estos componentes hijos también se muestren mediante el enrutamiento.

Por ejemplo, supongamos que tenemos el componente Aaaa. Accedemos a él a través de la URL /aaaa/. Creemos dos componentes hijos más: Chix y Chiy. Los mostraremos dentro de la plantilla del componente Aaaa. El componente Aaaa tendrá su propia etiqueta router-outlet, en la cual, dependiendo de la URL, se mostrará uno u otro componente hijo.

Bien, implementemos lo descrito.

Creemos el primer componente hijo:

terminalng generate component chix

Creemos el segundo componente hijo:

terminalng generate component chiy

Escribamos las rutas hijas separadas:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Agreguémoslas a la ruta del componente Aaaa como hijas:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

La ruta del componente padre será el inicio de la ruta hija. Esto significa que los componentes hijos estarán disponibles en las siguientes URLs: /aaaa/chix y /aaaa/chiy.

Ahora configuremos el componente Aaaa. Importemos la etiqueta para el enrutamiento:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Escribámosla en el decorador:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Insertemos la etiqueta en la plantilla:

app/aaaa/aaaa.component.html<p>it works</p>
<router-outlet></router-outlet>

Ahora será posible acceder a los componentes hijos por sus URLs y estos componentes se mostrarán. ¡Pruébalo!