Angular Academy · Lección

Parámetros de ruta y parámetros de consulta

Leer y reaccionar a los parámetros de las rutas

Parámetros de ruta y parámetros de consulta es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 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.

Parámetros de ruta frente a parámetros de consulta

Los parámetros de ruta forman parte de la ruta (/user/42). Los parámetros de consulta se añaden después de ? (/search?q=ng&page=2). El router proporciona acceso reactivo a ambos.

Definir un parámetro de ruta

Use dos puntos en la ruta para declarar un parámetro.

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

Leer parámetros con paramMap

ActivatedRoute.paramMap es un observable que emite cada vez que cambian los parámetros de ruta. Use .get() para leer un valor.

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Por qué observar los parámetros

Al navegar de /user/1 a /user/2, es posible que se reutilice el componente. El constructor se ejecuta una vez, pero paramMap vuelve a emitir; por eso debe suscribirse para reaccionar al cambio.

Snapshot para lecturas únicas

Si el componente nunca se reutiliza con un parámetro diferente, puede leer el snapshot de forma síncrona.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Parámetros de consulta con queryParamMap

queryParamMap expone los valores de la cadena de consulta, también como observable.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Navegar con parámetros de consulta

Use la opción queryParams en router.navigate o en la directiva routerLink.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Conservar los parámetros de consulta

queryParamsHandling: 'merge' conserva los parámetros existentes mientras actualiza algunos; 'preserve' los mantiene durante la navegación.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Vinculación de entradas del componente (moderna)

Con withComponentInputBinding(), los parámetros de ruta y de consulta se pueden vincular directamente a @Input() del componente (o a señales de entrada), sin pasar por ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll para parámetros repetidos

Use getAll() cuando una clave de consulta pueda aparecer varias veces, por ejemplo, ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Combinar parámetros con la carga de datos

Un patrón habitual consiste en transformar el parámetro en una llamada HTTP con switchMap para volver a cargar los datos cuando cambie el id.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Comprobación rápida

Compruebe su comprensión de los parámetros de ruta.

Repaso: parámetros de ruta y de consulta

El router expone los parámetros de forma reactiva.

paramMap: parámetros de ruta; obsérvelos cuando se reutilice el componente.
queryParamMap: cadena de consulta, con getAll para los valores repetidos.
snapshot para lecturas únicas.
withComponentInputBinding() vincula los parámetros a las entradas.

Siguiente: resolvers y datos de ruta.

Preguntas frecuentes

¿La lección «Parámetros de ruta y parámetros de consulta» es gratis?

Sí — el texto completo de «Parámetros de ruta y parámetros de consulta» 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 «Parámetros de ruta y parámetros de consulta»?

Leer y reaccionar a los parámetros de las rutas 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 1 de 4.

¿Cuánto tiempo toma la lección «Parámetros de ruta y parámetros de consulta»?

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