Angular Router: Route Resolvers

Jednym ze sposobów radzenia sobie z uzyskiwaniem i wyświetlaniem danych z API jest kierowanie użytkownika do komponentu, a następnie w haku ngOnInit tego komponentu wywołanie metody w usłudze w celu uzyskania potrzebnych danych. Podczas pobierania danych, być może komponent będzie mógł pokazać wskaźnik ładowania. Jest jednak inny sposób na wykorzystanie tak zwanego route resolvera, który pozwala na pobranie danych przed przejściem do nowej trasy.

Simple Resolver

W tym poście zaimplementujemy prosty route resolver, który pobiera dane z API Hacker News udostępnionego przez projekt HNPWA przed przejściem do trasy, która wyświetla zebrane dane. Zaczniemy od implementacji najprostszego resolvera, który po prostu zwraca ciąg znaków po 2 sekundach opóźnienia. Powinno to pomóc w zorientowaniu się, jak wszystko ze sobą połączyć.

Tworzymy osobną klasę dla naszego resolvera w osobnym pliku:

Jak widać, jedynym wymogiem implementacji interfejsu Resolve routera Angular jest posiadanie przez naszą klasę metody resolve. Cokolwiek zostanie zwrócone z tej metody będzie rozwiązanymi danymi.

Tutaj zwracamy obserwowalną, która opakowuje ciąg znaków po opóźnieniu 2 sekund.

Konfiguracja trasy

Teraz możemy skonfigurować nasz moduł routingu, aby zawierał nasz resolver:

Zauważ, że nasz resolver jest dostarczany tak jak usługa, a następnie dołączamy resolver do naszej definicji trasy. Tutaj rozwiązane dane będą dostępne pod kluczem wiadomości.

Dostęp do rozwiązanych danych w komponencie

W komponencie, możemy uzyskać dostęp do rozwiązanych danych używając właściwości data obiektu snapshot ActivatedRoute:

I to wszystko czego potrzebujemy. Teraz, w naszym komponencie, możemy uzyskać dostęp do naszej wiadomości Hello Alligator! w następujący sposób:

<p>the message: {{ data.message }}</p>

Zauważysz, że podczas nawigacji do trasy jest teraz 2-sekundowe opóźnienie, ponieważ dane są rozwiązywane jako pierwsze.

Resolving Data From an API

Zróbmy teraz coś bardziej realistycznego, pobierając dane z API. Tutaj stworzymy usługę, która pobiera dane z API Hacker News.

Tutaj jest nasza prosta usługa, w której używamy również nowego HttpClient:

A teraz możemy zmienić nasz resolver na coś takiego:

Dostęp do parametrów trasy

Możesz uzyskać dostęp do bieżących parametrów trasy w twoim resolverze używając obiektu ActivatedRouteSnapshot. Oto przykład, w którym użylibyśmy naszego resolvera, aby uzyskać dostęp do parametru id bieżącej trasy:

Nasza trasa może wyglądać tak:

{ path: 'post/:id', component: PostComponent, resolve: { hnData: HnResolver }}

A oto metoda getPost w naszej usłudze:

getPost(postId: string) { const endpoint = 'https://hnpwa.com/api/v0/item'; return this.http.get(`${endpoint}/${postId}.json`);}

Teraz, jeśli użytkownik przejdzie do, powiedzmy, http://localhost:4200/post/15392112, dane dla id postu 15392112 zostaną rozwiązane.

Obsługa błędów

W przypadku wystąpienia błędu podczas pobierania danych, możesz złapać i poradzić sobie z błędem w resolverze używając operatora catch w RxJS. Coś w tym stylu na przykład:

Albo możesz zwrócić pustą obserwowalną, w którym to przypadku użytkownik nie zostanie wysłany do nowej trasy:

resolve() { return this.hnService.getTopPosts().catch(() => { return Observable.empty(); });}

.