Uso de parámetros de consulta con Angular Router

Introducción

Al crear aplicaciones, puede haber escenarios en los que queramos pasar algunos argumentos o parámetros para describir el comportamiento de la ruta. En Angular, estos se llaman parámetros de consulta, y son opcionales. Los parámetros de consulta no deben confundirse con los parámetros de ruta normales que son parámetros obligatorios y están vinculados a una sola ruta.

Para aclarar la diferencia entre los parámetros de ruta y los parámetros de consulta, imagine que está creando una aplicación que almacena productos. Puede tener una ruta que abra cualquier producto específico utilizando product_id. También puede especificar un parámetro de consulta: read_only. Cuando read_only se establece en true, el usuario solo puede ver el registro, mientras que cuando read_only es false, el usuario también puede editar el registro. De esta manera, utilizando solo una ruta, se pueden manejar tanto los casos de uso de edición como de visualización. Aquí product_id es el parámetro de ruta y read_only que es opcional es el parámetro de consulta parameter.

Requisitos previos

Para comprender completamente este artículo, se requiere familiaridad con la creación de aplicaciones utilizando Angular. También será útil tener experiencia con Angular Router, RouterLink y ActivatedRoute.

Pasar parámetros de consulta con Router.navigate

Si está utilizando Router.navigate para navegar a través de las rutas, use queryParams para enviar los parámetros de consulta.

En el ejemplo anterior, si queremos que los visitantes vean la lista de productos ordenados por popularidad, utilizaremos el siguiente código:

Usando este código, la URL se convertirá en:

Sin embargo, puede haber escenarios en los que necesitemos pasar múltiples parámetros al navegar. Por ejemplo, si queremos ordenar los productos por popularidad y también por precio, podemos usar el siguiente código:

Esta vez la URL se convertirá en la siguiente:

Esto concluye cómo establecer parámetros de consulta utilizando queryParams.

Evitar la pérdida de parámetros de consulta utilizando queryParamsHandling

Al navegar entre rutas, los parámetros tienden a perderse. Supongamos que si pasamos un argumento arg0 no se pasará cuando ocurra el enrutamiento posterior. Podemos guardar los parámetros utilizando queryParamsHandling y estableciendo el valor en preserve o merge.

En el ejemplo anterior, supongamos que queremos dirigir a los visitantes a la página de marcas desde la de producto con el parámetro de ruta { order: 'popular' }, mientras mantenemos los parámetros de ruta. Para hacer esto, podemos usar queryParamsHandling y establecerlo en preserve :

Esto hará que la URL se vea como:

A continuación, supongamos que queremos conservar el parámetro de consulta de la ruta anterior { order: 'popular' }  mientras agregamos nuevos parámetros { price: 'high-to-low' }. Podemos establecer queryParamsHandling en merge:

Con el código anterior, la URL se convertirá en:

Aquí concluimos la preservación de los parámetros de consulta utilizando queryParamsHandling para preservar o fusionar.

Pasar parámetros de consulta con RouterLink

Teniendo en cuenta nuestro enlace anterior, si queremos usar la directiva RouterLink para navegar, necesitaremos pasar los parámetros de consulta usando queryParams como se muestra a continuación:

Observe cómo pasamos el objeto a queryParams usando el enlace unidireccional. También podemos pasar un objeto completo como queryParams .

Además, si queremos llevar estos parámetros de consulta adelante en la navegación posterior, podemos usar la opción queryParamsHandling. Las opciones posibles de queryParamsHandling son merge  y preserve:

Aquí, hemos visto cómo pasar los queryParams y el manejo de los parámetros usando queryParamsHandling en RouterLink.

Leer los valores de los parámetros de consulta

Hasta ahora hemos aprendido cómo pasar los parámetros de consulta en la ruta. Estos parámetros eran opcionales y se utilizaban para comunicar cierta información a la página de destino. Enviar los parámetros es una parte, pero también es necesario leer los parámetros de la URL y utilizarlos.

En Angular, leemos los parámetros de consulta de la ruta utilizando la clase ActivatedRoute. La clase ActivatedRoute tiene una propiedad observable llamada queryParams para revelar los parámetros de la URL actual.

Supongamos que estamos tratando con la siguiente URL:

Para acceder al parámetro de consulta order en el código, utilizamos el siguiente código:

Aquí en la consola, veremos el valor del parámetro de consulta order que es “popular” impreso. Si tenemos múltiples parámetros de consulta, podemos usar la queryParamMap propiedad que devuelve un observable paramsMap objeto.

Si tenemos la URL con múltiples parámetros de consulta como:

Podemos acceder a estos parámetros de consulta utilizando el siguiente código:

Usando el operador de propagación de objetos aquí, obtenemos el siguiente resultado:

Finalmente, deberías ser capaz de entender cómo acceder a los parámetros de consulta desde las rutas resultantes.

Conclusión

En este tutorial, analizamos la diferencia entre los parámetros de consulta y los parámetros de ruta. También vimos cómo pasar los argumentos a través de las rutas como parámetros de consulta y también recuperarlos en la página usando queryParams y queryParamsHandling con Router.navigate y RouterLink. También aprendimos cómo manejar queryParams y queryParamMap con ActivatedRoute.

Angular requiere JavaScript en su base. Si deseas profundizar tus conocimientos sobre JavaScript, puedes consultar los siguientes blogs:

• Trabajar con JavaScript: Cómo funcionan las clases
• Trabajar con JavaScript: Cómo funcionan los prototipos y las herencias
• JavaScript: Un tutorial sobre cómo indexar, dividir y manipular cadenas

¡Feliz programación!