hjørne-av-fotball-feltet

Hva er En Resolver?

for å sikre at visse data lastes fra ET API-svar før ruten faktisk aktiveres, bruker Vi Ruteoppløsere.

Med andre ord, for å forhåndsfeste dataene for en bestemt rute før komponenten lastes inn.

Hvorfor Bruke En Resolver?

Anta At det er et tilfelle når noen elementer i En Vinkelapplikasjon i en komponent vises spontant, men andre komponenter lastes etter At Observerbare abonnerer, noe som kan ta litt tid å gjengi PÅ BRUKERGRENSESNITTET. Her Kommer Resolvere til redning. De tillater applikasjoner å hente data først fra ET API-svar før komponenten blir lastet, noe som gir mulighet for rutenavigasjon.

La oss begynne å implementere Resolvere.

Du kan også like: Vinkelobservasjoner og Løfter – Hvordan Du Bruker dem.

Opprette En Resolver-Tjeneste

  • Importerer Løs grensesnitt fra@angular/router, som gir en løsningsmetode som sikrer at alt data som returneres, er løst.
  • Resolve()har to parametere — rute som er ActivatedRouteSnapshotog tilstand som er RouterStateSnapshotsom nedenfor:

Løs() grensesnitt

løs() grensesnitt
  • Resolve()metoden løser en observerbar:

ansatt.resolver.ts

ansatt.resolver.ts

Legge Til En Resolver I Rute

vi legger til resolveren, ansatt.løse.ts, i våre ruter, og løsemetoden, som ble lagt til i vår resolver, returnerer de løste dataene til nøkkelen som heter empData.

app.modul.ts

app.modul.ts

Tilgang Løst Data i Vår EmployeeDetailsComponent

Løst data kan nås ved hjelp av nøkkelen definert i våre ruter ved Hjelp Av ActivatedRoute snapshot objekt.

ansattes detaljer.komponent.ts

ansatt-detaljer.komponent.ts

Viser De Løste Dataene I HTML

ansattes detaljer.komponent.html

ansatt-detaljer.komponent.html

og det er slik resolveren fungerer – gjør dataene dine tilgjengelige før ruteren begynner å fungere og komponenter blir lastet!

God Lesing!

Videre Lesing

  • Angular 8: Alt du Trenger å Vite.
  • Full-Stack App Med Angular 8 og Web API: Del 1.
  • Logg Inn Med Facebook Og Google Ved Hjelp Av Angular 8.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.