Angular Academy · Lección

Eventos del router y navegación

Responder a los eventos del ciclo de vida de la navegación

Eventos del router y navegación es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

El flujo de eventos del router

Router.events es un observable que emite eventos durante el ciclo de vida de la navegación: inicio, reconocimiento, comprobación de guards, resolución y finalización. Suscríbase para reaccionar globalmente a la navegación.

Tipos de eventos principales

Eventos habituales: NavigationStart, NavigationEnd, NavigationCancel, NavigationError. Cada uno es una instancia de clase que puede filtrar.

Escuchar NavigationEnd

Filtre el flujo para obtener un tipo de evento específico con filter y una comprobación 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));

Indicador de carga global

Muestre un indicador giratorio entre NavigationStart y 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;
});

Desplazarse al principio durante la navegación

Restablezca la posición de desplazamiento después de cada navegación correcta. (También existe la opción integrada scrollPositionRestoration).

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

Seguimiento de páginas para analítica

NavigationEnd es el punto ideal para registrar las visitas de página en el sistema de analítica.

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

Navegación programática

router.navigate recibe un array de comandos; router.navigateByUrl recibe una cadena con la URL completa. Ambos devuelven una promesa que se resuelve indicando si la navegación tuvo éxito.

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

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

Navegación relativa

Use relativeTo para navegar en relación con la ruta actual, por ejemplo, desde un componente hijo.

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

routerLink y estado activo

En las plantillas, routerLink gestiona la navegación de forma declarativa y routerLinkActive añade una clase CSS al enlace activo.

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

Gestión de NavigationError

Suscríbase a NavigationError para gestionar las navegaciones fallidas (por ejemplo, por un resolver o una carga diferida que hayan fallado) y mostrar un mensaje claro.

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

Filtrado de eventos con tipos

Angular también ofrece el tipado RouterEvent; un predicado de protección de tipos en filter proporciona un evento correctamente tipado en el suscriptor sin necesidad de hacer conversiones.

Comprobación rápida

Compruebe su comprensión de los eventos del router.

Resumen: eventos y navegación del router

Router.events expone el ciclo de vida de la navegación.

Filtre NavigationStart/End/Cancel/Error.
Controle indicadores de carga, el restablecimiento del desplazamiento y la analítica.
Navegue mediante navigate/navigateByUrl o routerLink.

Ha completado Angular Router Advanced.

Preguntas frecuentes

¿La lección «Eventos del router y navegación» es gratis?

Sí — el texto completo de «Eventos del router y navegación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Eventos del router y navegación»?

Responder a los eventos del ciclo de vida de la navegación Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Eventos del router y navegación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Parámetros de ruta y parámetros de consulta
Resolvers y datos de ruta
Protectores de rutas funcionales
Eventos del router y navegación

← Volver a Angular Academy