hjørne af fodboldbane

Hvad er en Resolver?

for at sikre, at visse data indlæses fra et API-svar, før ruten faktisk aktiveres, bruger vi Ruteopløsere.

med andre ord at forudfange dataene for en bestemt rute, før komponenten indlæses.

Hvorfor bruge en Resolver?

Antag, at der er et tilfælde, hvor nogle elementer i en Vinkelapplikation i en komponent vises spontant, men andre komponenter indlæses, efter at observerbare abonneres med succes, hvilket kan tage lidt tid at gengive på UI. Her kommer resolvere til undsætning. De tillader applikationer at hente data først fra et API-svar, før komponenten bliver indlæst, hvilket giver mulighed for rutenavigation.

lad os begynde at implementere Resolvers.

du kan måske også lide: Vinkelobservabler og løfter – hvordan man bruger dem.

oprettelse af en Resolvertjeneste

  • import af Resolve-interface fra @angular/router, som giver en løsningsmetode, der sikrer, at alt data, der returneres, er løst.
  • Resolve() har to parametre — rute, som er ActivatedRouteSnapshot og tilstand, som er RouterStateSnapshot som nedenfor:

Resolve() interface

resolve() interface
  • Resolve() metode løser en observerbar:

medarbejder.resolver.ts

medarbejder.resolver.ts

tilføjelse af en Resolver i rute

Vi tilføjer resolveren, medarbejderen.løse.ts, i vores ruter, og resolve-metoden, som blev tilføjet i vores resolver, returnerer de løste data til nøglen empData.

app.modul.ts

app.modul.ts

adgang til løst Data i Vores EmployeeDetailsComponent

løst data kan tilgås ved hjælp af nøglen defineret i vores ruter ved hjælp af activatedroutes snapshot-objekt.

medarbejder-detaljer.komponent.ts

medarbejder-detaljer.komponent.ts

visning af de løste Data i HTML

medarbejder-detaljer.komponent.html

medarbejder-detaljer.komponent.html

og sådan fungerer resolveren-gør dine data tilgængelige, før routeren begynder at arbejde, og komponenter bliver indlæst!

glad læsning!

yderligere læsning

  • vinkel 8: alt hvad du behøver at vide.Full-Stack App med Vinkel 8 og API: Del 1.
  • Log ind med Facebook og Google ved hjælp af Angular 8.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.