Angular Router : Route Resolvers

Une façon de traiter l’obtention et l’affichage de données à partir d’une API est de router un utilisateur vers un composant, puis dans le hook ngOnInit de ce composant d’appeler une méthode dans un service pour obtenir les données nécessaires. Tout en obtenant les données, le composant peut éventuellement afficher un indicateur de chargement. Il existe cependant une autre façon d’utiliser ce qu’on appelle un résolveur de route, qui vous permet d’obtenir des données avant de naviguer vers la nouvelle route.

Simple Resolver

Dans ce post, nous allons implémenter un résolveur de route simple qui obtient des données de l’API Hacker News mise à disposition par le projet HNPWA avant de naviguer vers une route qui affiche les données recueillies. Nous commencerons par implémenter le résolveur le plus simple qui renvoie simplement une chaîne après un délai de 2 secondes. Cela devrait aider à avoir une vue d’ensemble de la façon de tout câbler.

Nous allons créer une classe séparée pour notre résolveur dans un fichier à part entière :

Comme vous pouvez le voir, la seule exigence pour implémenter l’interface Resolve du routeur Angular est que notre classe ait une méthode resolve. Tout ce qui est retourné par cette méthode sera les données résolues.

Ici, nous retournons un observable qui enveloppe une chaîne de caractères après un délai de 2 secondes.

Configuration de la route

Maintenant, nous pouvons configurer notre module de routage pour inclure notre résolveur:

Notez comment notre résolveur est fourni comme un service et ensuite nous incluons le résolveur avec notre définition de route. Ici, les données résolues seront disponibles sous la clé de message.

Accéder aux données résolues dans le composant

Dans le composant, nous pouvons accéder aux données résolues en utilisant la propriété data de l’objet snapshot de ActivatedRoute:

Et c’est tout ce dont nous avons besoin. Maintenant, dans notre composant, nous pouvons accéder à notre message Hello Alligator ! comme suit:

<p>the message: {{ data.message }}</p>

Vous remarquerez lors de la navigation vers la route qu’il y a maintenant un délai de 2 secondes parce que les données sont résolues en premier.

Résolution de données à partir d’une API

Rendons maintenant les choses plus réelles en obtenant réellement des données à partir d’une API. Ici, nous allons créer un service qui obtient des données de l’API Hacker News.

Voici notre service simple, où nous utilisons également le nouveau HttpClient:

Et maintenant nous pouvons changer notre résolveur à quelque chose comme ceci:

Accès aux paramètres de route

Vous pouvez avoir accès aux paramètres de route actuels dans votre résolveur en utilisant l’objet ActivatedRouteSnapshot. Voici un exemple où nous utiliserions notre résolveur pour obtenir l’accès au paramètre id de la route actuelle:

Notre route peut ressembler à ceci:

{ path: 'post/:id', component: PostComponent, resolve: { hnData: HnResolver }}

Et voici la méthode getPost dans notre service:

getPost(postId: string) { const endpoint = 'https://hnpwa.com/api/v0/item'; return this.http.get(`${endpoint}/${postId}.json`);}

Maintenant si un utilisateur va, disons, à http://localhost:4200/post/15392112, les données pour le post id 15392112 seront résolues.

Gestion des erreurs

Au cas où il y aurait une erreur lors de la récupération des données, vous pourriez attraper et traiter l’erreur dans le résolveur en utilisant l’opérateur catch de RxJS. Quelque chose comme ceci par exemple:

Ou vous pourriez retourner un observable vide, auquel cas l’utilisateur ne sera pas envoyé vers la nouvelle route:

resolve() { return this.hnService.getTopPosts().catch(() => { return Observable.empty(); });}

.