corner-of-soccer-field

Vad är en Resolver?

för att säkerställa att vissa data laddas från ett API-svar innan rutten faktiskt aktiveras använder vi Route Resolvers.

med andra ord, för att förhämta data för en viss rutt innan komponenten laddas.

Varför använda en Resolver?

Antag att det finns ett fall när vissa element visas spontant i en Vinkelapplikation i en komponent, men andra komponenter laddas efter att Observable har prenumererats framgångsrikt vilket kan ta lite tid att göra på användargränssnittet. Här kommer Resolvers till räddning. De tillåter applikationer att hämta data först från ett API-svar innan komponenten laddas, vilket möjliggör ruttnavigering.

Låt oss börja implementera Resolvers.

du kanske också gillar: Angular Observer och löften – hur man använder dem.

skapa en Resolver-tjänst

  • importera Lösningsgränssnitt från @angular/router, som tillhandahåller en lösningsmetod som säkerställer att allt data som returneras är löst.
  • Resolve() har två parametrar — rutt som är ActivatedRouteSnapshot och tillstånd som är RouterStateSnapshot enligt nedan:

Resolve() interface

resolve() interface
  • Resolve() metoden löser en observerbar:

anställd.resolver.ts

anställd.resolver.ts

lägga till en Resolver i Route

vi lägger till resolver, anställd.lösa.ts, i våra rutter, och lösningsmetoden, som lades till i vår resolver, returnerar de lösta data till nyckeln som heter empData.

app.modul.ts

app.modul.ts

åtkomst till lösta Data i vår EmployeeDetailsComponent

lösta data kan nås med den nyckel som definieras i våra rutter med Activatedroutes snapshot-objekt.

anställd-detaljer.komponent.ts

anställd-detaljer.komponent.ts

visar löst data i HTML

anställd-detaljer.komponent.html

anställd-detaljer.komponent.html

och så fungerar resolveren-gör dina data tillgängliga innan routern börjar fungera och komponenterna laddas!

glad läsning!

Vidare läsning

  • vinkel 8: Allt du behöver veta.
  • Full-Stack App med Angular 8 och Web API: Del 1.
  • logga in med Facebook och Google med Angular 8.

Lämna ett svar

Din e-postadress kommer inte publiceras.