Des routes enfants

Appelé aussi "routes imbriqués", les routes enfants permettent de mettre une navigation dans une vue.

Par exemple :

http://localhost/users/1337/profile

Affichera un composant Profile pour le profil de l'utilisateur

http://localhost/users/1337/roles

Affichera un composant Roles pour les différents rôles de l'utilisateur Cela peut s'apparenter à un menu avec des boutons changeant une page.

Rappelons la structure de notre application :

app/
|- app.component.ts
|- app.router.ts
|- app-config.ts
|- pages/
|  |- user.component.ts
|  |- user-profile.component.ts
|  |- user-role.component.ts

Le fichier app.router.ts a ce code :

import {Routes} from '@angular/router';
import {UserComponent} from './pages/user.component';
import {UserProfileComponent} from './pages/user-profile.component';
import {UserRoleComponent} from './pages/user-role.component';

export const routes:Routes = [
  {
    path: 'users/:id',
    component:  UserComponent,
    children: [
          {
            path: 'profile',
            component: UserProfileComponent
          },
          {
            path: 'roles',
            component: UserRoleComponent
          }
      ]
  },
];

Notez juste que nous avons la propriété children qui définit les différents composants pour le routeur enfant.

Imbriquer le RouterOutlet

Le premier <router-outlet> se trouve dans AppComponent comme d'habitude. Le deuxième se trouve UserComponent.

import {Component, OnInit, inject} from '@angular/core';
import {ActivatedRoute, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-other',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    Utilisateur {{id}}
    <router-outlet></router-outlet>
  `
})
export class OtherComponent implements OnInit {
  private route = inject(ActivatedRoute);
  id = 0;

  ngOnInit() {
   this.id = +this.route.snapshot.paramMap.get('id')!;
  }
}