Angular Router: Route Resolvers

O modalitate de a obține și afișa date de la o API este de a direcționa un utilizator către o componentă și apoi, în cârligul ngOnInit al acelei componente, de a apela o metodă dintr-un serviciu pentru a obține datele necesare. În timp ce obține datele, poate că componenta poate afișa un indicator de încărcare. Există însă și o altă modalitate, folosind ceea ce se numește un route resolver, care vă permite să obțineți datele înainte de a naviga către noua rută.

Simple Resolver

În această postare vom implementa un route resolver simplu care obține date din API-ul Hacker News pus la dispoziție de proiectul HNPWA înainte de a naviga către o rută care afișează datele colectate. Vom începe prin a implementa cel mai simplu rezolvator care pur și simplu returnează un șir de caractere după o întârziere de 2 secunde. Acest lucru ar trebui să ne ajute să ne facem o imagine de ansamblu despre cum să conectăm totul.

Vom crea o clasă separată pentru rezolvatorul nostru într-un fișier propriu:

După cum puteți vedea, singura cerință pentru a implementa interfața Resolve a routerului Angular este ca clasa noastră să aibă o metodă de rezolvare. Ceea ce este returnat din acea metodă vor fi datele rezolvate.

Aici returnăm un observabil care înfășoară un șir de caractere după o întârziere de 2 secunde.

Configurarea rutei

Acum putem configura modulul nostru de rutare pentru a include rezolvatorul nostru:

Observați cum rezolvatorul nostru este furnizat la fel ca un serviciu și apoi includem rezolvatorul cu definiția rutei noastre. Aici, datele rezolvate vor fi disponibile sub cheia de mesaj.

Accesarea datelor rezolvate în componentă

În componentă, putem accesa datele rezolvate folosind proprietatea data a obiectului snapshot al lui ActivatedRoute:

Și asta este tot ce avem nevoie. Acum, în componenta noastră, putem accesa mesajul Hello Alligator! în felul următor:

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

Vă veți observa, atunci când navigați către rută, că acum există o întârziere de 2 secunde, deoarece datele sunt rezolvate mai întâi.

Rezolvarea datelor de la o API

Să facem acum lucrurile mai reale, obținând efectiv niște date de la o API. Aici vom crea un serviciu care obține date din API-ul Hacker News.

Iată serviciul nostru simplu, în care folosim și noul HttpClient:

Și acum putem schimba rezolvatorul nostru în ceva de genul acesta:

Acces la parametrii de rută

Puteți obține acces la parametrii de rută actuali în rezolvatorul dumneavoastră folosind obiectul ActivatedRouteSnapshot. Iată un exemplu în care vom folosi rezolvatorul nostru pentru a obține acces la parametrul id al traseului curent:

Traseul nostru poate arăta astfel:

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

Și iată metoda getPost din serviciul nostru:

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

Acum, dacă un utilizator merge la, să zicem, http://localhost:4200/post/15392112, datele pentru ID-ul postului 15392112 vor fi rezolvate.

Manipularea erorilor

În cazul în care există o eroare în timpul preluării datelor, ați putea să prindeți și să tratați eroarea în rezolvare folosind operatorul catch al RxJS. Ceva de genul acesta, de exemplu:

Sau ați putea returna un observabil gol, caz în care utilizatorul nu va fi trimis la noua rută:

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

.