Routes enfants dans Angular

Il peut arriver que dans un composant déjà utilisé dans le routage, il y ait également des composants enfants. Il est possible de faire en sorte que ces composants enfants soient également affichés via le routage.

Par exemple, supposons que nous ayons un composant Aaaa. Nous y accédons via l'URL /aaaa/. Créons deux autres composants enfants : Chix et Chiy. Nous les afficherons à l'intérieur du template du composant Aaaa. Aaaa aura sa propre balise router-outlet, dans laquelle, en fonction de l'URL, l'un ou l'autre des composants enfants sera affiché.

Alors, implémentons ce qui a été décrit.

Créons le premier composant enfant :

ng generate component chix

Créons le deuxième composant enfant :

ng generate component chiy

Définissons des routes enfants distinctes :

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

Ajoutons-les à la route du composant Aaaa en tant qu'enfants :

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

Le chemin de la route du composant parent sera le début du chemin de l'enfant. Cela signifie que les composants enfants seront accessibles via les URL suivantes : /aaaa/chix et /aaaa/chiy.

Configurons maintenant le composant Aaaa. Importons la balise pour le routage :

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

Déclarons-le dans le décorateur :

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

Insérons la balise dans le template :

<p>cela fonctionne</p>
<router-outlet></router-outlet>

Il sera désormais possible d'accéder aux composants enfants via leurs URL et ces composants seront affichés. Essayez !

Implémentez le fonctionnement décrit des composants enfants.

Créez des liens permettant de basculer entre les composants enfants.