Cómo utilizar parámetros de consulta con Angular Router

Introducción

Los parámetros de consulta en Angular permiten pasar parámetros opcionales a cualquier ruta de la aplicación. Los parámetros de consulta son diferentes de los parámetros de ruta normales, que solo están disponibles en una ruta y no son opcionales (por ejemplo, /product/:id).

En este artículo, se hará referencia a un ejemplo de una aplicación que muestra una lista de productos. Se proporcionarán valores opcionales orderque price-rangeel componente receptor puede leer y utilizar. Los valores proporcionados afectarán el orden y el filtrado de la lista de productos.

Prerrequisitos

Para seguir este tutorial, necesitarás:

• Puede resultar beneficioso tener cierta familiaridad con AngularRouter y .RouterLinkActivatedRoute

Uso de parámetros de consulta conRouter.navigate

Si está navegando hacia la ruta de manera imperativa usando Router.navigate, pasará los parámetros de consulta con queryParams.

En nuestro ejemplo, si queremos dirigir a los visitantes a los productos con la lista ordenada por popularidad, se vería así:

goProducts() {  this.router.navigate(    ['/products'],    { queryParams: { order: 'popular' } }  );}

Esto dará como resultado una URL similar a la siguiente:

http://localhost:4200/products?order=popular

También puedes proporcionar varios parámetros de consulta. En nuestro ejemplo, si queremos dirigir a los visitantes a los productos con la lista ordenada por popularidad y filtrada con un rango de precio más alto, se vería así:

goProducts() {  this.router.navigate(    ['/products'],    { queryParams: { order: 'popular', 'price-range': 'not-cheap' } }  );}

Esto dará como resultado una URL similar a la siguiente:

http://localhost:4200/products?order=popularprice-range=not-cheap

Ahora, ya comprende cómo queryParamsse puede utilizar para establecer parámetros de consulta.

Conservación o fusión de parámetros de consulta conqueryParamsHandling

De forma predeterminada, los parámetros de consulta se pierden en cualquier acción de navegación posterior. Para evitarlo, puede configurarlo queryParamsHandlingcomo 'preserve'o como 'merge'.

En nuestro ejemplo, si queremos dirigir a los visitantes desde una página con el parámetro de consulta { order: 'popular' }a la /userspágina manteniendo los parámetros de consulta, usaríamos 'preserve':

goUsers() {  this.router.navigate(    ['/users'],    { queryParamsHandling: 'preserve' }  );}

Esto dará como resultado una URL similar a la siguiente:

http://localhost:4200/users?order=popular

En nuestro ejemplo, si queremos dirigir a los visitantes desde una página con el parámetro de consulta { order: 'popular' }a la /userspágina mientras pasamos el parámetro de consulta { filter: 'new' }, usaríamos 'merge':

goUsers() {  this.router.navigate(    ['/users'],    {      queryParams: { filter: 'new' },      queryParamsHandling: 'merge' }    );}

Esto dará como resultado una URL similar a la siguiente:

http://localhost:4200/users?order=popularfilter=new

Nota: Antes, la conservación de los parámetros de consulta se lograba con preserveQueryParamsset to true, pero esto ahora está obsoleto en Angular 4+ a favor de queryParamsHandling.

Ahora, ya comprende cómo queryParamsHandlingse puede utilizar para conservar y fusionar parámetros de consulta.

Uso de parámetros de consulta conRouterLink

En nuestro ejemplo, si en cambio estás usando la RouterLinkdirectiva para navegar a la ruta, lo harías queryParamsasí:

a  [routerLink]="['/products']"  [queryParams]="{ order: 'popular'}"  Products/a

Y en nuestro ejemplo, si desea 'preserve'consultar 'merge'parámetros en la navegación posterior, lo haría queryParamsHandlingde la siguiente manera:

a   [routerLink]="['/users']"   [queryParams]="{ filter: 'new' }"   queryParamsHandling="merge"  Users/a

Ahora entiendes cómo queryParamsy queryParamsHandlingse puede utilizar con RouterLink.

Acceso a los valores de los parámetros de consulta

Ahora que sabemos cómo pasar parámetros de consulta opcionales a una ruta, veamos cómo acceder a estos valores en las rutas resultantes. La ActivatedRouteclase tiene una queryParamspropiedad que devuelve un observable de los parámetros de consulta que están disponibles en la URL actual.

Dada la siguiente URL de ruta:

http://localhost:4200/products?order=popular

Podemos acceder al orderparámetro de consulta de la siguiente manera:

// ...import { ActivatedRoute } from '@angular/router';import 'rxjs/add/operator/filter';@Component({ ... })export class ProductComponent implements OnInit {  order: string;  constructor(private route: ActivatedRoute) { }  ngOnInit() {    this.route.queryParams      .filter(params = params.order)      .subscribe(params = {        console.log(params); // { order: "popular" }        this.order = params.order;        console.log(this.order); // popular      }    );  }}

En el registro de la consola veríamos el paramsobjeto:

Output{ order: "popular" }

Y el params.ordervalor:

Outputpopular

También existe queryParamMap, que devuelve un observable con un paramMapobjeto.

Dada la siguiente URL de ruta:

http://localhost:4200/products?order=popularfilter=new

Podemos acceder a los parámetros de consulta de la siguiente manera:

this.route.queryParamMap  .subscribe((params) = {    this.orderObj = { ...params.keys, ...params };  });

Aquí utilizamos el operador de propagación de objetos y esta es la forma resultante de los datos en orderObj:

{  "0": "order",  "1": "filter",  "params": {    "order": "popular",    "filter": "new"  }}

Ahora, comprende cómo se puede utilizar queryParamsy queryParamMappara acceder a los valores en las rutas resultantes.

Conclusión

En este artículo, utilizó diferentes ejemplos para establecer y obtener parámetros de consulta en Angular. Se le presentó queryParamsy queryParamsHandlingcon Router.navigatey RouterLink. También se le presentó queryParamsy queryParamMapcon ActivatedRoute.

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.