Angular
Angular Routing

Routes avec Paramètres

Les routes peuvent accepter des paramètres dynamiques (comme un ID d'utilisateur) pour afficher du contenu personnalisé sans créer une page par élément.

Exemple : Route avec un ID utilisateur

1. Définition de la route dynamique app.routes.ts

On utilise les deux-points (:) pour indiquer qu'une partie de l'URL est variable.

export const routes: Routes = [
  { 
    path: 'user/:id', // ":id" est un paramètre dynamique
    component: UserComponent 
  }
];

2. Récupération du paramètre user.component.ts

Pour lire l'ID passé dans l'URL, on utilise le service ActivatedRoute fourni par Angular.

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

@Component({
  selector: 'app-user',
  template: `<h2>Utilisateur ID: {{ userId }}</h2>`
})
export class UserComponent implements OnInit {
  userId: string = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // On s'abonne aux changements d'URL
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id') || '';
    });
  }
}

3. Lien de navigation HTML template.html

Pour naviguer vers cette route, on passe un tableau de segments à routerLink.

<!-- Création d'un lien dynamique vers le profil 42 -->
<a [routerLink]="['/user', 42]" class="btn btn-primary">Voir l'utilisateur 42</a>