Angular Academy · Leçon

Paramètres de route et paramètres de requête

Lisez les paramètres de route et réagissez-y

Paramètres de route et paramètres de requête est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Paramètres de route et paramètres de requête

Les paramètres de route font partie du chemin (/user/42). Les paramètres de requête sont ajoutés après ? (/search?q=ng&page=2). Le routeur vous permet d'accéder de manière réactive aux deux types.

Définir un paramètre de route

Utilisez deux-points dans le chemin pour déclarer un paramètre.

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

Lire les paramètres avec paramMap

ActivatedRoute.paramMap est un observable qui émet chaque fois que les paramètres de route changent. Utilisez .get() pour lire une valeur.

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Pourquoi observer les paramètres

Passer de /user/1 à /user/2 peut réutiliser le composant. Le constructeur ne s'exécute qu'une fois, mais paramMap émet à nouveau — vous devez donc vous y abonner pour réagir au changement.

Instantané pour une lecture ponctuelle

Si le composant n'est jamais réutilisé avec un autre paramètre, vous pouvez lire l'instantané de manière synchrone.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Paramètres de requête avec queryParamMap

queryParamMap expose les valeurs de la chaîne de requête, également sous la forme d'un observable.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Naviguer avec des paramètres de requête

Utilisez l'option queryParams dans router.navigate ou la directive routerLink.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Conserver les paramètres de requête

queryParamsHandling: 'merge' conserve les paramètres existants tout en en mettant certains à jour ; 'preserve' les conserve lors de la navigation.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Liaison moderne des entrées de composant

Avec withComponentInputBinding(), les paramètres de route et de requête peuvent être liés directement à @Input() du composant (ou à des signaux d'entrée), sans passer par ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll pour les paramètres répétés

Utilisez getAll() lorsqu'une clé de requête peut apparaître plusieurs fois, par exemple ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Combiner les paramètres avec le chargement des données

Schéma courant : transformez le paramètre en appel HTTP avec switchMap afin de relancer la récupération lorsque l'identifiant change.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Vérification rapide

Vérifiez votre compréhension des paramètres de route.

Récapitulatif : paramètres de route et de requête

Le routeur expose les paramètres de manière réactive.

paramMap : paramètres du chemin, à observer en cas de réutilisation.
queryParamMap : chaîne de requête, avec getAll pour les répétitions.
snapshot : pour les lectures ponctuelles.
withComponentInputBinding() : lie les paramètres aux entrées.

Ensuite : les résolveurs et les données de route.

Questions Fréquemment Posées

La leçon « Paramètres de route et paramètres de requête » est-elle gratuite ?

Oui — le texte complet de « Paramètres de route et paramètres de requête » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Paramètres de route et paramètres de requête » ?

Lisez les paramètres de route et réagissez-y Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Paramètres de route et paramètres de requête » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Paramètres de route et paramètres de requête
Résolveurs et données de route
Garde-fous fonctionnels de route
Événements du routeur et navigation

← Retour à Angular Academy