34. Comprendre le Router Outlet

La directive <router-outlet> agit comme un emplacement réservé où Angular charge et affiche dynamiquement le composant correspondant à l'URL actuelle.

Router Outlets multiples (Named Outlets)

La plupart des applications utilisent un seul outlet principal (l'outlet sans nom) dans app.component.html pour le contenu principal de la page. Cependant, Angular supporte plusieurs outlets nommés pour gérer des zones de navigation secondaires (ex : barres latérales, popups, pieds de page) de manière indépendante.

1. Définir l'outlet nommé

html

2. Configurer la route

Les routes ciblant un outlet nommé doivent spécifier la propriété outlet.

typescript const routes: Routes = [ { path: 'home', component: HomeComponent },

// Ce composant s'affichera dans l'outlet 'sidebar' { path: 'help', component: HelpSidebarComponent, outlet: 'sidebar' } ];

3. Navigation vers des outlets nommés

Pour naviguer vers un outlet nommé, vous devez le spécifier dans le tableau de chemin en utilisant la notation d'outlet.

html

<a [routerLink]="[{ outlets: { sidebar: ['help'] } }]">Afficher l'aide latérale

this.router.navigate([ { outlets: { sidebar: ['help'] } } ]);

Les outlets nommés permettent des UIs complexes où deux segments de route indépendants sont actifs simultanément (ex : le composant principal /dashboard et un composant secondaire /settings(sidebar:profile-preview)).