coin de terrain de football

Qu’est-ce qu’un résolveur ?

Pour s’assurer que certaines données sont chargées à partir d’une réponse d’API avant que la route ne soit réellement activée, nous utilisons des résolveurs de route.

En d’autres termes, pour pré-extraire les données d’une route particulière avant le chargement du composant.

Pourquoi utiliser un résolveur ?

Supposons qu’il existe un cas où, dans une application Angular, dans un composant, certains éléments sont affichés spontanément, mais d’autres composants sont chargés après la souscription réussie d’Observable, ce qui peut prendre un certain temps à s’afficher sur l’interface utilisateur. Ici, les résolveurs viennent à la rescousse. Ils permettent aux applications de récupérer les données d’abord à partir d’une réponse d’API avant que le composant ne soit chargé, ce qui permet la navigation d’itinéraire.

Commençons à implémenter des résolveurs.

Vous aimerez aussi: Observables angulaires et Promesses – Comment les utiliser.

Création d’un service de résolution

  • Importation de l’interface de résolution à partir de @angular/router, qui fournit une méthode de résolution qui garantit que les données renvoyées sont résolues.
  • Resolve() a deux paramètres — la route qui est ActivatedRouteSnapshot et l’état qui est RouterStateSnapshot comme ci-dessous:

Interface Resolve()

Interface Resolve()
  • La méthode Resolve() résout une méthode observable:

employé.résolveur.ts

employé.résolveur.ts

Ajout d’un résolveur dans la Route

Nous ajoutons le résolveur, employé.résoudre.ts, dans nos routes, et la méthode resolve, qui a été ajoutée dans notre résolveur renverra les données résolues dans la clé nommée empData.

app.module.ts

app.module.ts

Accéder aux données résolues dans notre EmployeeDetailsComponent

Les données résolues sont accessibles à l’aide de la clé définie dans nos routes à l’aide de l’objet snapshot de ActivatedRoute.

détails de l'employé.composant.ts

détails de l’employé.composant.ts

Affichage des données résolues en HTML

détails de l'employé.composant.html

détails de l’employé.composant.html

Et c’est ainsi que fonctionne le résolveur — rendez vos données disponibles avant que le routeur ne commence à fonctionner et que les composants ne soient chargés!

Bonne lecture!

Pour en savoir plus

  • Angular 8: Tout ce que vous devez savoir.
  • Application complète avec Angular 8 et API Web: Partie 1.
  • Connectez-vous avec Facebook et Google En utilisant Angular 8.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.