Angular Router:

Yksi tapa käsitellä tietojen saamista ja näyttämistä API:sta on reitittää käyttäjä komponenttiin, ja sitten tuon komponentin ngOnInit-koukussa kutsua palvelussa olevaa metodia tarvittavien tietojen saamiseksi. Tietoja haettaessa komponentti voi ehkä näyttää latausindikaattorin. On kuitenkin toinenkin tapa käyttää niin sanottua reittiresolveria, jonka avulla voit hakea dataa ennen navigointia uudelle reitille.

Yksinkertainen resolveri

Tässä postauksessa toteutamme yksinkertaisen reittiresolverin, joka hakee dataa Hacker Newsin API:sta, joka on saatavissa HNPWA-projektin kautta, ennen navigointia reitille, joka näyttää kerätyn datan. Aloitamme toteuttamalla yksinkertaisimman resolverin, joka yksinkertaisesti palauttaa merkkijonon 2 sekunnin viiveen jälkeen. Tämän pitäisi auttaa saamaan kokonaiskuva siitä, miten kaikki johdotetaan yhteen.

Luomme resolverillemme erillisen luokan omassa tiedostossaan:

Kuten näet, ainoa vaatimus Angular-reitittimen Resolve-rajapinnan toteuttamiseksi on, että luokallamme on resolve-metodi. Se, mitä tuosta metodista palautetaan, on resolvattu data.

Tässä palautamme observable:n, joka kietoo merkkijonon 2 sekunnin viiveen jälkeen.

Reitin konfigurointi

Nyt voimme määrittää reititysmoduulimme sisällyttämään resolverimme:

Huomaa, kuinka resolveri tarjotaan aivan kuten palvelu ja sitten sisällytämme resolverin reititysmäärittelyymme. Täällä ratkaistut tiedot ovat käytettävissä viestin avaimen alla.

Resolvoitujen tietojen käyttäminen komponentissa

Komponentissa pääsemme käsiksi resolvoituihin tietoihin käyttämällä ActivatedRouten snapshot-olion data-ominaisuutta:

Ja siinä kaikki mitä tarvitsemme. Nyt komponentissamme voimme käyttää Hello Alligator! -viestiämme näin:

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

Huomaa, kun navigoit reittiin, että nyt on kahden sekunnin viive, koska data resolvataan ensin.

Datan resolvaaminen API:sta

Tehdään nyt asioista todellisempia hakemalla oikeasti dataa API:sta. Tässä luomme palvelun, joka hakee dataa Hacker Newsin API:sta.

Tässä on yksinkertainen palvelumme, jossa käytämme myös uutta HttpClient:

Ja nyt voimme muuttaa resolverimme joksikin seuraavanlaiseksi:

Pääsy reittiparametreihin

Saat pääsyn resolverisi nykyisiin reittiparametreihin ActivatedRouteSnapshot-olion avulla. Tässä on esimerkki, jossa käyttäisimme resolveriamme saadaksemme pääsyn nykyisen reitin id-parametriin:

Reittimme voi näyttää tältä:

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

Ja tässä on palvelumme getPost-metodi:

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

Ja nyt, jos käyttäjä siirtyy vaikkapa osoitteeseen http://localhost:4200/post/15392112, postin post-id:n 15392112 tiedot ratkaistaan.

Virheiden käsittely

Jos datan noutamisessa tapahtuu virhe, voit ottaa kiinni ja käsitellä virheen resolverissa RxJS:n catch-operaattorin avulla. Jotain tällaista esimerkiksi:

Tai voisit palauttaa tyhjän observablen, jolloin käyttäjää ei lähetetä uudelle reitille:

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