corner-of-soccer-field

Che cos’è un Resolver?

Per garantire che determinati dati vengano caricati da una risposta API prima che il percorso venga effettivamente attivato, utilizziamo i risolutori di percorso.

In altre parole, per prefetch i dati per un particolare percorso prima che il componente viene caricato.

Perché usare un Resolver?

Supponiamo, c’è un caso in cui, in un’applicazione angolare, in un componente, alcuni elementi vengono visualizzati spontaneamente, ma altri componenti vengono caricati dopo che Observable è stato sottoscritto con successo, il che potrebbe richiedere del tempo per il rendering sull’interfaccia utente. Qui, i Risolutori vengono in soccorso. Consentono alle applicazioni di recuperare prima i dati da una risposta API prima che il componente venga caricato, consentendo la navigazione del percorso.

Iniziamo a implementare i Resolver.

Potrebbe piacerti anche: Osservabili angolari e promesse – Come usarli.

Creazione di un servizio di risoluzione

  • Importazione dell’interfaccia di risoluzione da@angular/router, che fornisce un metodo di risoluzione che garantisce la risoluzione dei dati restituiti.
  • Resolve() ha due parametri di rotta che è ActivatedRouteSnapshot e stato RouterStateSnapshot come di seguito:

Risolvere() l'interfaccia

Risolvere() interfaccia
  • Resolve() metodo consente di risolvere un osservabili:

dipendente.risolutore.ts

dipendente.risolutore.ts

Aggiunta di un Resolver in Route

Stiamo aggiungendo il resolver, employee.risolvere.ts, nei nostri percorsi, e il metodo resolve, che è stato aggiunto nel nostro resolver restituirà i dati risolti nella chiave denominata empData.

app.modulo.ts

app.modulo.ts

Accesso ai dati risolti nel nostro EmployeeDetailsComponent

È possibile accedere ai dati risolti utilizzando la chiave definita nei nostri percorsi utilizzando l’oggetto snapshot di ActivatedRoute.

dipendente-dettagli.componente.ts

employee-dettagli.componente.ts

Visualizzazione dei dati risolti in HTML

employee-details.componente.html

employee-dettagli.componente.html

Ed è così che funziona il resolver: rendi disponibili i tuoi dati prima che il router inizi a funzionare e i componenti vengano caricati!

Buona lettura!

Ulteriori letture

  • Angular 8: tutto quello che devi sapere.
  • App full-Stack con Angular 8 e API Web: Parte 1.
  • Accedi con Facebook e Google usando Angular 8.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.