Szögletes útválasztó:

Az API-ból származó adatok megszerzésének és megjelenítésének egyik módja, hogy a felhasználót egy komponenshez irányítjuk, majd a komponens ngOnInit horgában meghívunk egy metódust egy szolgáltatásban a szükséges adatok megszerzéséhez. Az adatok megszerzése közben a komponens esetleg megjeleníthet egy betöltési jelzőt. Van azonban egy másik módszer is, az úgynevezett route resolver használatával, amely lehetővé teszi az adatok megszerzését, mielőtt az új útvonalra navigálnánk.

Simple Resolver

Ebben a bejegyzésben egy egyszerű route resolvert fogunk implementálni, amely a HNPWA projekt által elérhetővé tett Hacker News API-ból szerez adatokat, mielőtt egy olyan útvonalra navigálna, amely megjeleníti az összegyűjtött adatokat. A legegyszerűbb reszolver implementálásával kezdünk, amely egyszerűen egy sztringet ad vissza 2 másodperces késleltetés után. Ez segíteni fog abban, hogy átfogó képet kapjunk arról, hogyan kell mindent összekötni.

Elkészítünk egy külön osztályt a reszolverünknek egy saját fájlban:

Mint láthatjuk, az Angular router Resolve interfészének implementálásához az egyetlen követelmény, hogy az osztályunknak legyen egy resolve metódusa. Bármit is ad vissza ez a metódus, az lesz a feloldott adat.

Itt egy observable-t adunk vissza, amely egy stringet csomagol 2 másodperc késleltetés után.

Route konfiguráció

Most beállíthatjuk az útválasztó modulunkat, hogy tartalmazza a resolverünket:

Figyeljük meg, hogy a resolverünket ugyanúgy biztosítjuk, mint egy szolgáltatást, majd az útvonaldefinícióhoz csatoljuk a resolvert. Itt a feloldott adatok az üzenetkulcs alatt lesznek elérhetők.

A feloldott adatok elérése a komponensben

A komponensben az ActivatedRoute snapshot objektumának data tulajdonságával érhetjük el a feloldott adatokat:

És ez minden, amire szükségünk van. Most a komponensünkben a következőképpen érhetjük el a Hello Alligator! üzenetünket:

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

Az útvonalra navigáláskor észrevehetjük, hogy most már van egy 2 másodperces késleltetés, mert az adatokat először feloldjuk.

Adatok feloldása egy API-ból

Most tegyük a dolgokat életszerűbbé azzal, hogy ténylegesen kapunk néhány adatot egy API-ból. Itt létrehozunk egy szolgáltatást, amely a Hacker News API-ból kap adatokat.

Itt van a mi egyszerű szolgáltatásunk, ahol szintén az új HttpClientet használjuk:

És most megváltoztathatjuk a reszolverünket valami ilyesmire:

Az útvonalparaméterekhez való hozzáférés

Az ActivatedRouteSnapshot objektummal hozzáférhetünk az aktuális útvonalparaméterekhez a reszolverünkben. Íme egy példa, ahol a resolverünk segítségével hozzáférhetünk az aktuális útvonal id paraméteréhez:

Az útvonalunk így nézhet ki:

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

És itt van a szolgáltatásunk getPost metódusa:

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

Most ha egy felhasználó mondjuk a http://localhost:4200/post/15392112-ra megy, akkor a post id 15392112 adatai lesznek feloldva.

Hibakezelés

Ha az adatok lekérdezése közben hiba lépne fel, akkor az RxJS catch operátorával elkaphatjuk és kezelhetjük a hibát a reszolverben. Valami ilyesmi például:

Vagy visszaadhatsz egy üres observable-t, ebben az esetben a felhasználó nem kerül átküldésre az új útvonalra:

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