Angular Router: Route Resolvers

Een manier om gegevens van een API op te halen en weer te geven, is om een gebruiker naar een component te routeren en vervolgens in de ngOnInit-hook van die component een methode in een service aan te roepen om de benodigde gegevens op te halen. Terwijl de gegevens worden opgehaald, kan de component misschien een laadindicator tonen. Er is echter een andere manier met behulp van wat bekend staat als een route resolver, die u toelaat om gegevens te krijgen voordat u navigeert naar de nieuwe route.

Simple Resolver

In dit bericht zullen we een eenvoudige route resolver die gegevens krijgt van de Hacker News API beschikbaar gesteld van het HNPWA-project te implementeren voordat u navigeert naar een route die de verzamelde gegevens weergeeft. We zullen beginnen met het implementeren van de eenvoudigste resolver die simpelweg een string retourneert na een vertraging van 2 seconden. Dit zou moeten helpen om het grote plaatje te krijgen van hoe alles in elkaar steekt.

We maken een aparte klasse voor onze resolver in een eigen bestand:

Zoals u kunt zien, is de enige vereiste om de Angular router’s Resolve interface te implementeren, dat onze klasse een resolve methode heeft. Wat uit die methode wordt geretourneerd zal de opgeloste data zijn.

Hier retourneren we een observable die een string omhult na een vertraging van 2 seconden.

Route Configuratie

Nu kunnen we onze routing module instellen om onze resolver op te nemen:

Merk op hoe onze resolver wordt geleverd net als een service en vervolgens nemen we de resolver op met onze route definitie. Hier zullen de opgeloste gegevens beschikbaar zijn onder de berichtsleutel.

Toegang tot opgeloste gegevens in de component

In de component kunnen we toegang krijgen tot de opgeloste gegevens met behulp van de data property van het ActivatedRoute’s snapshot object:

En dat is alles wat we nodig hebben. Nu, in onze component, kunnen we onze Hello Alligator! boodschap als volgt benaderen:

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

U zult bij het navigeren naar de route merken dat er nu een vertraging van 2 seconden is omdat de gegevens eerst worden opgelost.

Oplossen van gegevens van een API

Laten we nu de zaken wat realistischer maken door daadwerkelijk gegevens van een API te halen. Hier zullen we een service maken die gegevens uit de Hacker News API haalt.

Hier is onze eenvoudige service, waar we ook de nieuwe HttpClient gebruiken:

En nu kunnen we onze resolver veranderen in iets als dit:

Toegang tot Route Params

U kunt toegang krijgen tot de huidige route parameters in uw resolver met behulp van het ActivatedRouteSnapshot object. Hier is een voorbeeld waar we onze resolver zouden gebruiken om toegang te krijgen tot de id-parameter van de huidige route:

Onze route kan er als volgt uitzien:

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

En hier is de getPost-methode in onze service:

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

Als een gebruiker nu naar, laten we zeggen, http://localhost:4200/post/15392112 gaat, zullen de gegevens voor het post-id 15392112 worden opgelost.

Foutafhandeling

In het geval dat er een fout optreedt bij het ophalen van de gegevens, kunt u de fout in de resolver opvangen en afhandelen met de catch-operator van RxJS. Zoiets als dit bijvoorbeeld:

Of je zou een lege observeerbare kunnen retourneren, in welk geval de gebruiker niet naar de nieuwe route zal worden gestuurd:

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