Úhlový směrovač:

Jedním ze způsobů, jak se vypořádat se získáváním a zobrazováním dat z API, je nasměrovat uživatele na komponentu a poté v háčku ngOnInit této komponenty zavolat metodu ve službě, která získá potřebná data. Při získávání dat může komponenta možná zobrazit indikátor načítání. Existuje však i jiný způsob pomocí takzvaného route resolveru, který umožňuje získat data ještě před navigací na novou trasu.

Jednoduchý resolver

V tomto příspěvku budeme implementovat jednoduchý route resolver, který získá data z rozhraní API Hacker News zpřístupněného v rámci projektu HNPWA ještě před navigací na trasu, která nasbíraná data zobrazí. Začneme implementací nejjednoduššího resolveru, který jednoduše vrátí řetězec po zpoždění 2 sekund. To by mělo pomoci získat celkový obrázek o tom, jak vše zapojit dohromady.

Pro náš resolver vytvoříme samostatnou třídu ve vlastním souboru:

Jak vidíte, jediným požadavkem na implementaci rozhraní Resolve směrovače Angular je, aby naše třída měla metodu resolve. Cokoli bude z této metody vráceno, budou resolvovaná data.

Tady vracíme observable, které po 2sekundovém zpoždění zabalí řetězec.

Konfigurace trasy

Nyní můžeme nastavit náš směrovací modul tak, aby zahrnoval náš resolver:

Všimněte si, že náš resolver je poskytován stejně jako služba a pak resolver zahrneme do naší definice trasy. Zde budou vyřešená data dostupná pod klíčem zprávy.

Přístup k vyřešeným datům v komponentě

V komponentě můžeme přistupovat k vyřešeným datům pomocí vlastnosti data objektu snímku ActivatedRoute:

A to je vše, co potřebujeme. Nyní můžeme v naší komponentě přistupovat k naší zprávě Hello Alligator! takto:

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

Při přechodu na trasu si všimnete, že nyní dochází k dvousekundovému zpoždění, protože data jsou nejprve resolvována.

Resolving Data From an API

Přibližme si nyní situaci tím, že skutečně získáme nějaká data z API. Zde vytvoříme službu, která bude získávat data z API serveru Hacker News.

Tady je naše jednoduchá služba, kde také použijeme nového klienta HttpClient:

A nyní můžeme změnit náš resolver na něco takového:

Přístup k parametrům trasy

Přístup k aktuálním parametrům trasy v resolveru můžete získat pomocí objektu ActivatedRouteSnapshot. Zde je příklad, kdy bychom pomocí našeho resolveru získali přístup k parametru id aktuální trasy:

Naše trasa může vypadat takto:

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

A zde je metoda getPost v naší službě:

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

Pokud nyní uživatel přejde například na http://localhost:4200/post/15392112, budou vyřešena data pro příspěvek id 15392112.

Obsluha chyb

V případě, že při načítání dat dojde k chybě, můžete chybu zachytit a vyřešit v resolveru pomocí operátoru catch v RxJS. Například něco takového:

Nebo byste mohli vrátit prázdný observable, v takovém případě nebude uživatel odeslán na novou trasu:

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

.