0Pricing
Angular Academy · Leçon

Résolveurs et données de route

Préchargez les données avant d’activer une route

Résolveurs et données de route est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Qu'est-ce qu'un résolveur

Un résolveur précharge les données avant l'activation d'une route, afin que le composant s'affiche avec les données déjà disponibles — sans écran de chargement dans le composant lui-même.

Données statiques de route

La propriété data associe des valeurs statiques à une route, que vous pouvez lire via ActivatedRoute.data.

export const routes = [
  { path: 'admin', component: AdminComponent,
    data: { title: 'Admin Panel', roles: ['admin'] } }
];

Lire les données de route

route.data est un observable de l'objet de données fusionnées.

route.data.subscribe(d => {
  console.log(d['title']); // Admin Panel
});

Résolveur fonctionnel : ResolveFn

Angular moderne utilise ResolveFn — une fonction simple qui renvoie les données (ou un observable ou une promesse de ces données).

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const userResolver = (route) => {
  const http = inject(HttpClient);
  return http.get('/api/user/' + route.paramMap.get('id'));
};

Associer le résolveur à une route

Associez les résolveurs sous la clé resolve. Le résultat est placé dans route.data sous cette clé.

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

Utiliser les données résolues

Lisez la valeur résolue dans route.data à l'aide de sa clé.

route.data.subscribe(d => {
  this.user = d['user']; // already loaded
});

Données résolues via la liaison d'entrée

Avec withComponentInputBinding(), les clés résolues sont automatiquement liées aux entrées correspondantes du composant.

export class UserComponent {
  @Input() user!: User; // from resolve: { user: ... }
}

Résolveurs et moment de la navigation

Le routeur attend que l'observable du résolveur soit terminé (ou que la promesse soit résolue) avant d'activer la route. Un résolveur qui ne se termine jamais bloque la navigation.

Gérer les erreurs des résolveurs

Si un résolveur rencontre une erreur, la navigation est annulée. Interceptez les erreurs dans le résolveur pour rediriger l'utilisateur ou renvoyer une solution de repli.

export const userResolver = (route) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  return http.get('/api/user/' + route.paramMap.get('id')).pipe(
    catchError(() => { router.navigate(['/404']); return EMPTY; })
  );
};

Quand utiliser les résolveurs

Utilisez les résolveurs pour les données qui doivent être présentes avant l'affichage de la page. Pour les données qui peuvent être chargées progressivement, les récupérer dans le composant (avec un état de chargement) offre souvent une meilleure expérience utilisateur. Ne bloquez pas la navigation pour des données facultatives lentes à charger.

Stratégie de titre

Le routeur possède une propriété de route title intégrée et TitleStrategy pour définir le titre du document, souvent avec des données résolues.

export const routes = [
  { path: 'about', component: AboutComponent, title: 'About Us' }
];

Vérification rapide

Vérifiez votre compréhension des résolveurs.

Récapitulatif : résolveurs et données de route

Les résolveurs préchargent les données avant l'activation.

  • data : valeurs statiques de la route.
  • ResolveFn + resolve : préchargement dynamique dans route.data.
  • Le routeur attend la fin du traitement ; gérez les erreurs pour éviter de bloquer la navigation.

Ensuite : les gardes de route fonctionnels.

Questions Fréquemment Posées

La leçon « Résolveurs et données de route » est-elle gratuite ?

Oui — le texte complet de « Résolveurs et données de route » 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 « Résolveurs et données de route » ?

Préchargez les données avant d’activer une route 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 2 sur 4.

Combien de temps prend la leçon « Résolveurs et données de route » ?

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

  1. Paramètres de route et paramètres de requête
  2. Résolveurs et données de route
  3. Garde-fous fonctionnels de route
  4. Événements du routeur et navigation
← Retour à Angular Academy