corner-of-soccer-field

Co To jest Resolver?

aby upewnić się, że niektóre dane są ładowane z odpowiedzi API przed aktywacją trasy, używamy Resolverów trasy.

innymi słowy, aby wstępnie pobrać dane dla określonej trasy przed załadowaniem komponentu.

po co używać Resolvera?

Załóżmy, że w aplikacji Angular, w komponencie, niektóre elementy są wyświetlane spontanicznie, ale inne są ładowane po pomyślnym subskrybowaniu Observable, co może zająć trochę czasu, aby renderować w interfejsie użytkownika. Tutaj, Resolvers przyjść na ratunek. Umożliwiają one aplikacjom pobieranie danych z odpowiedzi API przed załadowaniem komponentu, umożliwiając nawigację po trasie.

zacznijmy implementować Resolvery.

Możesz również polubić: Angular Observables and Promises – How To Use Them.

Tworzenie usługi Resolvera

  • Importowanie interfejsu Resolve z@angular/router, która zapewnia metodę resolve, która zapewnia rozwiązanie zwracanych danych.
  • Resolve() ma dwa parametry — trasę, która jestActivatedRouteSnapshot I stan, który jestRouterStateSnapshot jak poniżej:

interfejs Resolve ()

interfejs resolve ()
  • metodaResolve() rozwiązuje obserwowalny:

pracownik.resolver.ts

pracownik.resolver.ts

dodawanie Resolvera w trasie

dodajemy resolver, employee.postanowienie.ts, w naszych trasach, oraz metoda resolve, która została dodana w naszym resolverze zwrócą rozwiązane dane do klucza o nazwieempData.

moduł.ts

app.moduł.ts

dostęp do rozwiązanych danych w naszych Pracownikachedetailscomponent

dane rozwiązane można uzyskać za pomocą klucza zdefiniowanego w naszych trasach za pomocą obiektu migawki ActivatedRoute.

pracownik-szczegóły.komponent.ts

pracownik-szczegóły.komponent.ts

Wyświetlanie Danych w HTML

pracownik-szczegóły.komponent.html

pracownik-szczegóły.komponent.html

i tak działa resolver — Udostępnij swoje dane przed rozpoczęciem pracy routera i załadowaniem komponentów!

miłego czytania!

Czytaj dalej

  • pełna aplikacja z Angular 8 i Web API: Część 1.
  • Zaloguj się przez Facebook i Google za pomocą Angular 8.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.