Ciclo de vida y eventos del Router

Angular Router proporciona un conjunto completo de hooks de ciclo de vida y eventos que te permiten responder a cambios de navegación y ejecutar lógica personalizada durante el proceso de enrutamiento.

Eventos comunes del router

Angular Router emite eventos de navegación a los que puedes suscribirte para rastrear el ciclo de vida de la navegación. Estos eventos están disponibles a través del observable Router.events. Esta sección cubre eventos comunes del ciclo de vida de enrutamiento para navegación y seguimiento de errores (en orden cronológico).

Los siguientes son eventos de error comunes:

Para una lista de todos los eventos de ciclo de vida, consulta la tabla completa de esta guía.

Cómo suscribirse a eventos del router

Cuando quieres ejecutar código durante eventos específicos del ciclo de vida de navegación, puedes hacerlo suscribiéndote a router.events y verificando la instancia del evento:

// Ejemplo de suscripción a eventos del routerimport { Component, inject, signal, effect } from '@angular/core';import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router';@Component({ ... })export class RouterEventsComponent {  private readonly router = inject(Router);    constructor() {    // Suscribirse a eventos del router y reaccionar a eventos    this.router.events.pipe(takeUntilDestroyed()).subscribe((event: Event) => {      if (event instanceof NavigationStart) {        // Navegación iniciando        console.log('Navigation starting:', event.url);      }      if (event instanceof NavigationEnd) {        // Navegación completada        console.log('Navigation completed:', event.url);      }    });  }}

Nota: El tipo Event de @angular/router tiene el mismo nombre que el tipo global regular Event, pero es diferente del tipo RouterEvent.

Cómo depurar eventos de enrutamiento

Depurar problemas de navegación del router puede ser desafiante sin visibilidad en la secuencia de eventos. Angular proporciona una característica de depuración integrada que registra todos los eventos del router en la consola, ayudándote a entender el flujo de navegación e identificar dónde ocurren los problemas.

Cuando necesitas inspeccionar una secuencia de eventos del Router, puedes habilitar el registro para eventos de navegación internos para depuración. Puedes configurar esto pasando una opción de configuración (withDebugTracing()) que habilita el registro detallado en consola de todos los eventos de enrutamiento.

import { provideRouter, withDebugTracing } from '@angular/router';const appRoutes: Routes = [];bootstrapApplication(AppComponent,  {    providers: [      provideRouter(appRoutes, withDebugTracing())    ]  });

Para más información, consulta la documentación oficial sobre withDebugTracing.

Casos de uso comunes

Los eventos del router habilitan muchas características prácticas en aplicaciones del mundo real. Aquí hay algunos patrones comunes que se usan con eventos del router.

Indicadores de carga

Mostrar indicadores de carga durante la navegación:

import { Component, inject } from '@angular/core';import { Router } from '@angular/router';import { toSignal } from '@angular/core/rxjs-interop';import { map } from 'rxjs/operators';@Component({  selector: 'app-loading',  template: `    @if (loading()) {      <div class="loading-spinner">Loading...</div>    }  `})export class AppComponent {  private router = inject(Router);    readonly loading = toSignal(    this.router.events.pipe(      map(() => !!this.router.getCurrentNavigation())    ),    { initialValue: false }  );}

Seguimiento de analíticas

Rastrear vistas de página para analíticas:

import { Component, inject, signal, effect } from '@angular/core';import { Router, NavigationEnd } from '@angular/router';@Injectable({ providedIn: 'root' })export class AnalyticsService {  private router = inject(Router);  private destroyRef = inject(DestroyRef);  startTracking() {    this.router.events.pipe(takeUntilDestroyed(this.destroyRef))      .subscribe(event => {        // Rastrear vistas de página cuando cambia la URL        if (event instanceof NavigationEnd) {           // Enviar vista de página a analíticas          this.analytics.trackPageView(url);        }      });  }  private analytics = {    trackPageView: (url: string) => {      console.log('Page view tracked:', url);    }  };}

Manejo de errores

Manejar errores de navegación con gracia y proporcionar retroalimentación al usuario:

import { Component, inject, signal } from '@angular/core';import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router';@Component({  selector: 'app-error-handler',  template: `    @if (errorMessage()) {      <div class="error-banner">        {{ errorMessage() }}        <button (click)="dismissError()">Dismiss</button>      </div>    }  `})export class ErrorHandlerComponent {  private router = inject(Router);  readonly errorMessage = signal('');  constructor() {    this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {      if (event instanceof NavigationStart) {        this.errorMessage.set('');      } else if (event instanceof NavigationError) {        console.error('Navigation error:', event.error);        this.errorMessage.set('Failed to load page. Please try again.');      } else if (event instanceof NavigationCancel) {        console.warn('Navigation cancelled:', event.reason);        if (event.reason === NavigationCancellationCode.GuardRejected) {          this.errorMessage.set('Access denied. Please check your permissions.');        }      }    });  }  dismissError() {    this.errorMessage.set('');  }}

Todos los eventos del router

Para referencia, aquí está la lista completa de todos los eventos del router disponibles en Angular. Estos eventos están organizados por categoría y listados en el orden en que típicamente ocurren durante la navegación.

Eventos de navegación

Estos eventos rastrean el proceso central de navegación desde el inicio a través del reconocimiento de rutas, verificación de guards y resolución de datos. Proporcionan visibilidad en cada fase del ciclo de vida de navegación.

Eventos de activación

Estos eventos ocurren durante la fase de activación cuando los componentes de ruta están siendo instanciados e inicializados. Los eventos de activación se disparan para cada ruta en el árbol de rutas, incluyendo rutas padre e hijo.

Eventos de finalización de navegación

Estos eventos representan el resultado final de un intento de navegación. Cada navegación terminará con exactamente uno de estos eventos, indicando si tuvo éxito, fue cancelada, falló o fue omitida.

Otros eventos

Hay un evento adicional que ocurre fuera del ciclo de vida principal de navegación, pero aún es parte del sistema de eventos del router.

Próximos pasos

Aprende más sobre guards de ruta y tareas comunes del router.