Angular Academy · Lección

Resolvers y datos de ruta

Precargar datos antes de activar una ruta

Resolvers y datos de ruta es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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.

Qué es un resolver

Un resolver precarga datos antes de que se active una ruta, de modo que el componente se renderiza con los datos ya disponibles, sin mostrar un estado de carga dentro del propio componente.

Datos estáticos de la ruta

La propiedad data asocia valores estáticos a una ruta, que pueden leerse mediante ActivatedRoute.data.

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

Leer los datos de la ruta

route.data es un observable del objeto de datos combinado.

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

Resolver funcional: ResolveFn

Angular moderno usa ResolveFn: una función sencilla que devuelve los datos (o un observable o promise de estos).

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'));
};

Asociar el resolver a una ruta

Asocie los resolvers mediante la clave resolve. El resultado se almacena en route.data con esa clave.

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

Consumir datos resueltos

Lea el valor resuelto en route.data mediante su clave.

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

Datos resueltos mediante vinculación de entradas

Con withComponentInputBinding(), las claves resueltas se vinculan automáticamente a las entradas correspondientes del componente.

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

Resolvers y momento de la navegación

El router espera a que el observable del resolver se complete (o a que la promise se resuelva) antes de activar la ruta. Un resolver que nunca se completa bloquea la navegación.

Gestionar errores de los resolvers

Si un resolver produce un error, la navegación se cancela. Capture los errores dentro del resolver para redirigir o devolver una alternativa.

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; })
  );
};

Cuándo usar resolvers

Use resolvers para los datos que deben estar disponibles antes de mostrar la página. Para los datos que pueden cargarse progresivamente, obtenerlos en el componente (con un estado de carga) suele ofrecer una mejor experiencia de usuario. No bloquee la navegación por datos opcionales lentos.

Estrategia de título

El router incluye la propiedad de ruta title y TitleStrategy para establecer el título del documento, a menudo junto con datos resueltos.

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

Comprobación rápida

Compruebe su comprensión de los resolvers.

Repaso: resolvers y datos de ruta

Los resolvers precargan datos antes de la activación.

data: valores estáticos de la ruta.
ResolveFn + resolve: precarga dinámica en route.data.
El router espera a que finalice; gestione los errores para evitar bloquear la navegación.

Siguiente: guards funcionales de ruta.

Preguntas frecuentes

¿La lección «Resolvers y datos de ruta» es gratis?

Sí — el texto completo de «Resolvers y datos de ruta» 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 «Resolvers y datos de ruta»?

Precargar datos antes de activar una ruta 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 2 de 4.

¿Cuánto tiempo toma la lección «Resolvers y datos de ruta»?

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