Parámetros tipo Query

Domina el manejo de parámetros tipo query en Angular para controlar vistas como view o edit, sin romper la navegación. Aquí verás cómo enviarlos desde routerLink y cómo leerlos correctamente con snapshot en el componente de detalle.

¿Qué cambia con los parámetros tipo query en Angular?

Los parámetros tipo query se agregan a la URL después de un signo de interrogación y se separan con &. A diferencia de los parámetros de ruta, no son requeridos por el router y no causan errores si faltan. Sirven para comunicar acciones o contexto al componente, como view, edit o un referrer.

• No son obligatorios para el router.
• No detienen la navegación si faltan.
• Permiten pasar varias claves en un objeto.
• Útiles para estados: view, edit, referrer.

¿Cómo enviarlos con routerLink y queryParams?

En lugares.component.html, se añade la directiva [queryParams] junto con routerLink y se pasa un objeto con los valores deseados. Al navegar, la URL mostrará los valores de forma inmediata, y puedes agregar o cambiar entradas sin errores.

fullscreen
<!-- lugares.component.html -->
<a [routerLink]="['/lugares', lugar.id]"
   [queryParams]="{ action: 'view', referrer: 'Google' }">
  Abrir detalle
</a>
``

- El objeto define claves como `action` y `referrer`.
- La URL refleja cambios al instante.
- Puedes agregar más parámetros sin modificar rutas.

### ¿Qué estructura lleva el objeto de query params?
Se trata de un **objeto literal** con pares clave-valor que Angular serializa en la URL.

- Claves descriptivas: `action`, `referrer`.
- Valores simples: cadenas como *view*, *edit*, *Google*.
- Se pueden combinar múltiples claves.

## ¿Cómo leerlos en el componente de detalle con snapshot?
En `detalle.component.ts`, al imprimir `this.route.queryParams` verás el objeto con los valores. Sin embargo, al intentar acceder directamente a una clave puede aparecer `undefined`. La forma correcta de obtener un valor específico en ese momento es usar **`this.route.snapshot.queryParams`** con notación de corchetes.

```ts
// detalle.component.ts
ngOnInit(): void {
  console.log(this.route.queryParams); // Muestra el objeto de la query.
  console.log(this.route.snapshot.queryParams['action']);   // 'edit' o 'view'.
  console.log(this.route.snapshot.queryParams['referrer']); // 'Google'.
}

• Imprimir queryParams ayuda a ver el objeto completo.
• Para leer una clave puntual usa snapshot.queryParams['clave'].
• Si accedes sin snapshot, puedes obtener undefined en el acceso directo.

¿Para qué usar acciones como action y referrer?

Estos parámetros activan comportamientos en la vista de detalle: por ejemplo, mostrar datos en modo view o habilitar inputs para edit, además de registrar el origen con referrer.

• action: controla si solo se ve o se edita.
• referrer: identifica el origen, como Google.
• Ayudan a condicionar la interfaz sin rutas adicionales.

¿Tienes dudas o quieres compartir cómo usas query params en tus vistas? Escribe tu pregunta o ejemplo en los comentarios y seguimos la conversación.