Angular Academy · Lezione

Resolver e dati delle route

Precaricare i dati prima di attivare una route

Resolver e dati delle route è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cos'è un resolver

Un resolver precarica i dati prima dell'attivazione di un percorso, così il componente viene visualizzato con i dati già disponibili, senza mostrare un caricamento al suo interno.

Dati statici del percorso

La proprietà data associa valori statici a un percorso, leggibili tramite ActivatedRoute.data.

export const routes = [
  { path: 'admin', component: AdminComponent,
    data: { title: 'Admin Panel', roles: ['admin'] } }
];

Leggere i dati del percorso

route.data è un observable dell'oggetto contenente i dati uniti.

route.data.subscribe(d => {
  console.log(d['title']); // Admin Panel
});

Resolver funzionale: ResolveFn

Angular moderno utilizza ResolveFn, una semplice funzione che restituisce i dati, oppure un observable o una promise che li restituisce.

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const userResolver = (route) => {
  const http = inject(HttpClient);
  return http.get('/api/user/' + route.paramMap.get('id'));
};

Collegare il resolver a un percorso

Associ i resolver sotto la chiave resolve. Il risultato viene inserito in route.data sotto quella chiave.

export const routes = [
  { path: 'user/:id', component: UserComponent,
    resolve: { user: userResolver } }
];

Utilizzare i dati risolti

Legga il valore risolto da route.data utilizzando la relativa chiave.

route.data.subscribe(d => {
  this.user = d['user']; // already loaded
});

Dati risolti tramite binding degli input

Con withComponentInputBinding(), le chiavi risolte vengono associate automaticamente agli input del componente corrispondenti.

export class UserComponent {
  @Input() user!: User; // from resolve: { user: ... }
}

Resolver e tempistiche della navigazione

Il router attende che l'observable del resolver venga completato, o che la promise si risolva, prima di attivare il percorso. Un resolver che non viene mai completato blocca la navigazione.

Gestire gli errori dei resolver

Se un resolver restituisce un errore, la navigazione viene annullata. Intercetti gli errori all'interno del resolver per reindirizzare l'utente o restituire un fallback.

export const userResolver = (route) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  return http.get('/api/user/' + route.paramMap.get('id')).pipe(
    catchError(() => { router.navigate(['/404']); return EMPTY; })
  );
};

Quando utilizzare i resolver

Utilizzi i resolver per i dati che devono essere presenti prima di visualizzare la pagina. Per i dati che possono essere caricati progressivamente, spesso è preferibile eseguire il caricamento nel componente, mostrando uno stato di caricamento. Non blocchi la navigazione per dati opzionali lenti.

Strategia per il titolo

Il router dispone della proprietà di percorso integrata title e di TitleStrategy per impostare il titolo del documento, spesso insieme ai dati risolti.

export const routes = [
  { path: 'about', component: AboutComponent, title: 'About Us' }
];

Verifica rapida

Verifichi la Sua comprensione dei resolver.

Riepilogo: resolver e dati di percorso

I resolver precaricano i dati prima dell'attivazione.

data: valori statici del percorso.
ResolveFn + resolve: precaricamento dinamico in route.data.
Il router attende il completamento; gestisca gli errori per evitare di bloccare la navigazione.

Prossimo argomento: guardie di percorso funzionali.

Domande Frequenti

La lezione «Resolver e dati delle route» è gratuita?

Sì — il testo completo di «Resolver e dati delle route» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Resolver e dati delle route»?

Precaricare i dati prima di attivare una route Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Resolver e dati delle route»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy