Router angolare: Route Resolver

Un modo per gestire l’ottenimento e la visualizzazione di dati da un’API è quello di indirizzare un utente a un componente, e poi nell’hook ngOnInit di quel componente chiamare un metodo in un servizio per ottenere i dati necessari. Mentre ottiene i dati, forse il componente può mostrare un indicatore di caricamento. C’è però un altro modo, usando il cosiddetto route resolver, che permette di ottenere i dati prima di navigare verso la nuova rotta.

Simple Resolver

In questo post implementeremo un semplice route resolver che ottiene i dati dalle API di Hacker News rese disponibili dal progetto HNPWA prima di navigare verso una rotta che mostra i dati raccolti. Inizieremo implementando il resolver più semplice che semplicemente restituisce una stringa dopo un ritardo di 2 secondi. Questo dovrebbe aiutare ad avere un quadro generale di come collegare tutto insieme.

Creeremo una classe separata per il nostro resolver in un file proprio:

Come potete vedere, l’unico requisito per implementare l’interfaccia Resolve del router Angular è che la nostra classe abbia un metodo resolve. Qualunque cosa venga restituita da quel metodo sarà il dato risolto.

Qui restituiamo un osservabile che avvolge una stringa dopo un ritardo di 2 secondi.

Configurazione della rotta

Ora possiamo configurare il nostro modulo di routing per includere il nostro resolver:

Nota come il nostro resolver è fornito proprio come un servizio e poi includiamo il resolver con la nostra definizione di rotta. Qui i dati risolti saranno disponibili sotto la chiave del messaggio.

Accedere ai dati risolti nel componente

Nel componente, possiamo accedere ai dati risolti usando la proprietà data dell’oggetto snapshot di ActivatedRoute:

E questo è tutto quello che ci serve. Ora, nel nostro componente, possiamo accedere al nostro messaggio Hello Alligator come segue:

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

Si noterà che quando si naviga verso la rotta c’è ora un ritardo di 2 secondi perché i dati vengono risolti per primi.

Risolvere i dati da un’API

Ora rendiamo le cose più reali ottenendo effettivamente dei dati da un’API. Qui creeremo un servizio che ottiene dati dall’API di Hacker News.

Ecco il nostro semplice servizio, dove usiamo anche il nuovo HttpClient:

E ora possiamo cambiare il nostro resolver in qualcosa come questo:

Accesso ai parametri della rotta

Puoi avere accesso ai parametri della rotta corrente nel tuo resolver usando l’oggetto ActivatedRouteSnapshot. Ecco un esempio in cui useremmo il nostro resolver per ottenere l’accesso al parametro id della rotta corrente:

La nostra rotta può assomigliare a questa:

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

E ecco il metodo getPost nel nostro servizio:

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

Ora se un utente va a, diciamo, http://localhost:4200/post/15392112, i dati per il post id 15392112 saranno risolti.

Gestione degli errori

Nel caso ci sia un errore durante il recupero dei dati, si potrebbe catturare e gestire l’errore nel resolver usando l’operatore catch di RxJS. Qualcosa del genere per esempio:

Oppure potreste restituire un observable vuoto, nel qual caso l’utente non verrà inviato alla nuova rotta:

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