Angular Academy · Lezione

Eventi del router e navigazione

Gestire gli eventi del ciclo di vita della navigazione

Eventi del router e navigazione è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Il flusso degli eventi del router

Router.events è un observable che emette eventi durante il ciclo di vita della navigazione: avvio, riconoscimento, verifiche delle guard, risoluzione e fine. Si sottoscriva per reagire globalmente alla navigazione.

Tipi di eventi principali

Eventi comuni: NavigationStart, NavigationEnd, NavigationCancel, NavigationError. Ognuno è un'istanza di una classe che può filtrare.

Ascoltare NavigationEnd

Filtri il flusso in base a un tipo di evento specifico con filter e un controllo instanceof.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

Indicatore di caricamento globale

Mostri uno spinner tra NavigationStart e NavigationEnd/Cancel/Error.

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

Tornare all'inizio durante la navigazione

Reimposti la posizione di scorrimento dopo ogni navigazione completata correttamente. (È disponibile anche scrollPositionRestoration integrato.)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

Tracciamento delle pagine per l'analytics

NavigationEnd è l'hook ideale per registrare le visualizzazioni di pagina negli strumenti di analytics.

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

Navigazione programmatica

router.navigate accetta un array di comandi; router.navigateByUrl accetta una stringa URL completa. Entrambi restituiscono una promise che si risolve indicando se la navigazione ha avuto successo.

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

Navigazione relativa

Usi relativeTo per navigare rispetto alla route corrente, ad esempio da un componente figlio.

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink e stato attivo

Nei template, routerLink gestisce la navigazione in modo dichiarativo, mentre routerLinkActive aggiunge una classe CSS al link attivo.

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

Gestire NavigationError

Si sottoscriva a NavigationError per gestire le navigazioni non riuscite (ad esempio a causa di un resolver o di un lazy loading non riuscito) e mostrare un messaggio comprensibile.

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

Filtraggio tipizzato degli eventi

Angular offre anche la tipizzazione RouterEvent; un predicato type guard in filter fornisce al subscriber un evento correttamente tipizzato, senza bisogno di cast.

Verifica rapida

Verifichi la Sua comprensione degli eventi del router.

Riepilogo: eventi del router e navigazione

Router.events espone il ciclo di vita della navigazione.

Filtri NavigationStart/End/Cancel/Error.
Gestisca spinner di caricamento, ripristino dello scorrimento e analytics.
Navighi tramite navigate/navigateByUrl o routerLink.

Ha completato Angular Router Advanced.

Domande Frequenti

La lezione «Eventi del router e navigazione» è gratuita?

Sì — il testo completo di «Eventi del router e navigazione» è 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 «Eventi del router e navigazione»?

Gestire gli eventi del ciclo di vita della navigazione 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 4 di 4.

Quanto tempo richiede la lezione «Eventi del router e navigazione»?

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