Événements du routeur et navigation
Réagissez aux événements du cycle de vie de la navigation
Événements du routeur et navigation est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Le flux d’événements du routeur
Router.events est un observable qui émet pendant le cycle de vie de la navigation : démarrage, reconnaissance, vérification des guards, résolution et fin. Abonnez-vous à ce flux pour réagir globalement à la navigation.
Principaux types d’événements
Événements courants : NavigationStart, NavigationEnd, NavigationCancel et NavigationError. Chacun est une instance de classe que vous pouvez filtrer.
Écouter NavigationEnd
Filtrez le flux pour obtenir un type d’événement précis avec filter et une vérification instanceof.
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';
const router = inject(Router);
router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));Indicateur de chargement global
Affichez un indicateur de chargement entre NavigationStart et NavigationEnd/Cancel/Error.
router.events.subscribe(e => {
if (e instanceof NavigationStart) this.loading = true;
if (e instanceof NavigationEnd ||
e instanceof NavigationCancel ||
e instanceof NavigationError) this.loading = false;
});Remonter en haut lors de la navigation
Réinitialisez la position de défilement après chaque navigation réussie. (L’option intégrée scrollPositionRestoration existe également.)
router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));Suivi des pages pour l’analyse d’audience
NavigationEnd est le point d’accroche idéal pour enregistrer les consultations de pages dans l’outil d’analyse d’audience.
router.events.pipe(
filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));Navigation programmatique
router.navigate accepte un tableau de commandes ; router.navigateByUrl accepte une chaîne contenant une URL complète. Les deux renvoient une promesse qui indique si la navigation a réussi.
router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');
const ok = await router.navigate(['/home']);
console.log('success?', ok);Navigation relative
Utilisez relativeTo pour naviguer relativement à la route actuelle, par exemple depuis un composant enfant.
const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });routerLink et état actif
Dans les modèles, routerLink gère la navigation de manière déclarative, tandis que routerLinkActive ajoute une classe CSS au lien actif.
<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
routerLinkActive="active">Profile</a>Gérer NavigationError
Abonnez-vous à NavigationError pour gérer les navigations échouées (par exemple, à cause d’un résolveur ou d’un chargement différé défaillant) et afficher un message convivial.
router.events.pipe(
filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));Filtrage typé des événements
Angular propose également le typage RouterEvent ; un prédicat de garde de type dans filter vous fournit un événement correctement typé dans l’abonné, sans conversion de type.
Vérification rapide
Vérifiez votre compréhension des événements du routeur.
Récapitulatif : événements du routeur et navigation
Router.events expose le cycle de vie de la navigation.
- Filtrez les événements
NavigationStart/End/Cancel/Error. - Gérez les indicateurs de chargement, la réinitialisation du défilement et l’analyse d’audience.
- Naviguez avec
navigate/navigateByUrlourouterLink.
Vous avez terminé le cours Angular Router avancé.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 38
- Leçons
- 144
Questions Fréquemment Posées
La leçon « Événements du routeur et navigation » est-elle gratuite ?
Oui — le texte complet de « Événements du routeur et navigation » 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 « Événements du routeur et navigation » ?
Réagissez aux événements du cycle de vie de la navigation 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 4 sur 4.
Combien de temps prend la leçon « Événements du routeur et navigation » ?
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