35. Accéder aux paramètres de route

Les routes dynamiques nécessitent des paramètres (ex : /user/10, où 10 est le paramètre). Angular fournit le service ActivatedRoute pour y accéder.

1. Définir une route paramétrée

Utilisez deux points (:) suivis du nom du paramètre.

typescript const routes: Routes = [ { path: 'user/:id', component: UserDetailComponent } ];

2. Accès aux paramètres : Snapshot (Données statiques)

Si le composant est assuré d'être détruit et recréé à chaque changement de route (ex : passer de /user/1 à /about), le snapshot suffit.

typescript import { ActivatedRoute } from '@angular/router';

export class UserDetailComponent implements OnInit { userId: string | null = null;

constructor(private route: ActivatedRoute) { }

ngOnInit(): void { // Lit le paramètre instantanément lors de l'initialisation this.userId = this.route.snapshot.paramMap.get('id'); // Récupérer les données utilisateur avec this.userId } }

3. Accès aux paramètres : Observable (Données réactives)

Si l'utilisateur navigue entre des routes utilisant le même composant (ex : de /user/1 à /user/2), l'instance du composant est réutilisée et ngOnInit ne se déclenche plus. Dans ce cas, nous devons nous abonner à l'Observable paramMap pour réagir aux changements.

typescript // ... dans UserDetailComponent

ngOnInit(): void { this.route.paramMap.subscribe(params => { this.userId = params.get('id'); console.log('Nouvel ID utilisateur :', this.userId); // Ré-exécuter la récupération des données ici à chaque changement d'ID }); }

Bonne pratique : Utilisez toujours l'approche Observable pour les paramètres de route, sauf si vous êtes certain que le composant ne naviguera jamais vers lui-même.