📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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 :

plaintext
app/
|- app.component.ts
|- app.router.ts
|- app.config.ts
|- main.component.ts
|- other.component.ts
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.

ts
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 :

js
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.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !