Cómo usar los parámetros de consulta en Angular

Introducción

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

En este artículo, nos referiremos a un ejemplo de una aplicación que muestra una lista de productos. Proporcionaremos valores de order opcional y price-range en los que el componente receptor puede leer y actuar. Los valores proporcionados afectarán el orden y filtrado de la lista de productos.

Uso de parámetros de consulta con Router.navigate

Si navega a la ruta de forma imperativa usando Router.navigate, pasará los parámetros de consulta con queryParams.

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

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

Esto dará como resultado una URL con el siguiente aspecto:

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

También puede proporcionar múltiples parámetros de consulta. En nuestro ejemplo, si queremos enrutar visitantes a los productos con la lista ordenada por popularidad y filtrada con un alto rango de precios, se verá así:

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

Esto dará como resultado una URL con el siguiente aspecto:

http://localhost:4200/products?order=popular&price-range=not-cheap

Ahora ya sabe cómo puede usar queryParams para configurar los parámetros de consulta.

Conservar o combinar parámetros de consulta con queryParamsHandling

De forma predeterminada, los parámetros de consulta se pierden en cualquier acción de navegación posterior. Para evitar esto, puede configurar queryParamsHandling, ya sea para 'preserve' o 'merge'.

En nuestro ejemplo, si queremos enrutar visitantes desde una página con el parámetro de consulta { order: 'popular' } a la página /users, manteniendo los parámetros de consulta, usaremos 'preserve':

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

Esto dará como resultado una URL con el siguiente aspecto:

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

En nuestro ejemplo, si queremos enrutar visitantes desde una página con el parámetro de consulta { order: 'popular' } a la página /users, pasando el parámetro de consulta { filter: 'new' }, usaremos 'merge':

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

Esto dará como resultado una URL con el siguiente aspecto:

http://localhost:4200/users?order=popular&filter=new

Ahora ya sabe cómo puede usar queryParamsHandling para conservar y combinar los parámetros de consulta.

Uso de parámetros de consulta con RouterLink

En nuestro ejemplo, si en vez de eso está usando la directiva RouterLink para navegar a la ruta, tendría que usar queryParams de esta forma:

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

Y en nuestro ejemplo, si desea 'preserve' o 'merge' parámetros de consulta en la posterior navegación, tendría que usar queryParamsHandling de esta forma:

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

Ahora ya sabe cómo puede usar queryParams y queryParamsHandling con RouterLink.

Acceso a los valores del parámetro de consulta

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

Dada la siguiente ruta URL:

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

Podemos acceder al parámetro de consulta order de esta forma:

// ...
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, veremos el objeto params:

Output
{ order: "popular" }

Y el valor params.order

Output
popular

También existe queryParamMap, que devuelve un observable con un objeto paramMap

Dada la siguiente ruta URL:

http://localhost:4200/products?order=popular&filter=new

Podemos acceder al parámetro de consulta order de esta forma:

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

Aquí hemos utilizado el operador de propagación del objeto y así es como se verán los datos en orderObj:

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

Ahora ya sabe cómo puede usar queryParams y queryParamMap para acceder a los valores en las rutas resultantes.

Conclusión

En este artículo, utilizamos diferentes ejemplos para configurar y obtener parámetros de consulta en Angular. Presentamos queryParams y queryParamsHandling con Router.navigate y RouterLink. También presentamos queryParams y queryParamMap con ActivatedRoute.

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