Route figlie in Angular

Può succedere che in un componente che è già coinvolto nel routing, ci siano anche componenti figli. Possiamo fare in modo che anche questi componenti figli vengano visualizzati tramite il routing.

Ad esempio, supponiamo di avere un componente Aaaa. Vi accediamo tramite l'URL /aaaa/. Creiamo altri due componenti figli: Chix e Chiy. Li visualizzeremo all'interno della vista del componente Aaaa. Aaaa avrà il suo tag router-outlet, in cui, a seconda dell'URL, verrà visualizzato un componente figlio o l'altro.

Quindi, implementiamo quanto descritto.

Creiamo il primo componente figlio:

ng generate component chix

Creiamo il secondo componente figlio:

ng generate component chiy

Scriviamo le route figlie separate:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

Aggiungiamole alla route del componente Aaaa come figlie:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

Il percorso dalla route del componente genitore sarà l'inizio del percorso per quello figlio. Ciò significa che i componenti figli saranno accessibili ai seguenti URL: /aaaa/chix e /aaaa/chiy.

Ora configuriamo il componente Aaaa. Importiamo il tag per il routing:

import { RouterOutlet } from '@angular/router';

Inseriamolo nel decoratore:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Inseriamo il tag nella vista:

<p>funziona</p>
<router-outlet></router-outlet>

Ora sarà possibile accedere ai componenti figli tramite i loro URL e questi componenti saranno visualizzati. Provate!

Implementate il funzionamento descritto dei componenti figli.

Create dei link per alternare la visualizzazione dei componenti figli.