Utiliser des paramètres dans le routeur

Il est possible de passer des paramètres dans l'URL pour afficher des informations spécifiques. Par exemple, pour afficher le profil d'un utilisateur, nous pouvons passer l'identifiant de l'utilisateur dans l'URL. Avant tout, voici la structure de notre application :

app/
|- app.component.ts
|- app.router.ts
|- app.config.ts
|- main.component.ts
|- other.component.ts

import { Routes } from '@angular/router';
import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

export const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'other/:id', component: OtherComponent }
];

:id indique que nous pouvons avoir un identifiant.

Naviguer avec un paramètre

import {Component} from '@angular/core';
import {RouterOutlet, RouterLink} from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink],
  standalone: true,
  template: `
    <ul>
      <li><a [routerLink]="['/main']">main</a></li>
      <li><a [routerLink]="['/other', 1337]">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {}

Nous avons deux liens, un pour main et un pour other. Le lien other a un paramètre 1337. Nous utilisons un tableau pour définir le lien. Pourquoi ? Il est plus simple de passer des paramètres avec un tableau que de manipuler des chaînes.

Récupérer le paramètre dans le composant

Admettons que nous avons un composant OtherComponent :

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

@Component({
  selector: 'app-other',
  standalone: true,
  template: `
    Other with id {{id}}
    <button (click)="nav()">MainComponent</button>
  `
})
export class OtherComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  id = 0;

  ngOnInit() {
    this.route.params.subscribe(params => {
       this.id = +params.id;
    });
  }

  nav() {
    this.router.navigate(['/main']);
  }
}

Nous chargeons et initialisons le service ActivatedRoute. Nous récupérons le paramètre avec un Observable lorsque le composant est initialisé.

Pourquoi avoir utiliser uj observable ?

Les paramètres de route sont des observables. Cela signifie que nous pouvons les observer pour obtenir les valeurs. Cela nous permet de réagir aux changements de paramètres. Et ça peut être le cas ici ! Si nous changeons l'identifiant dans l'URL, le composant OtherComponent sera mis à jour.