corner-of-soccer-field

Wat Is een Resolver?

om ervoor te zorgen dat bepaalde gegevens worden geladen vanuit een API-antwoord voordat de route daadwerkelijk wordt geactiveerd, gebruiken we Route Resolvers.

met andere woorden, om de gegevens voor een bepaalde route te bepalen voordat het onderdeel wordt geladen.

waarom een Resolver gebruiken?

neem aan dat er een geval is wanneer in een Hoekapplicatie in een component sommige elementen spontaan worden weergegeven, maar andere componenten worden geladen nadat Observable met succes is geabonneerd, wat enige tijd kan duren om te renderen op de gebruikersinterface. Hier komen Resolvers te hulp. Hiermee kunnen applicaties eerst Gegevens ophalen uit een API-reactie voordat het onderdeel wordt geladen, waardoor routenavigatie mogelijk is.

laten we beginnen met het implementeren van Resolvers.

misschien vind je het ook leuk: hoekige Observables en beloften – hoe ze te gebruiken.

een Resolver-Service aanmaken

  • De Resolve-interface importeren vanuit @angular/router, die een resolve-methode biedt die ervoor zorgt dat alle gegevens die worden geretourneerd worden opgelost.
  • Resolve() heeft twee parameters — route, die ActivatedRouteSnapshot en staat die RouterStateSnapshot zoals hieronder:

Oplossen() interface

Oplossen() interface
  • De Resolve() methode wordt een waarneembare:

werknemer.conflictoplosser.ts

werknemer.conflictoplosser.ts

een Resolver toevoegen in Route

we voegen de resolver, werknemer toe.oplossen.ts, in onze routes, en de resolve methode, die in onze resolver werd toegevoegd, zullen de opgeloste gegevens retourneren in de sleutel met de naam empData.

app.module.ts

app.module.TS

toegang krijgen tot opgeloste gegevens in onze EmployeeDetailsComponent

opgeloste gegevens kan worden benaderd met behulp van de sleutel gedefinieerd in onze routes met behulp van het snapshot-object van de geactiveerde route.

employee-details.component.ts

employee-details.component.ts

het weergeven van de gevonden gegevens in HTML

employee-details.component.html

employee-details.component.html

en zo werkt de resolver-maak uw gegevens beschikbaar voordat de router begint te werken en componenten worden geladen!

veel leesplezier!

verder lezen

  • hoek 8: alles wat u moet weten.
  • Full-Stack App met hoekige 8 en Web API: deel 1.
  • Log in met Facebook en Google met behulp van Angular 8.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.