Tutorial

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

Published on November 16, 2020
authorauthor

Alligator.io and Bradley Kouchi

Español
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

Nota: Conservar los parámetros de consulta utilizados para hacerse con preserveQueryParams configurado en true, pero esto ahora es obsoleto en Angular 4+ a favor de queryParamsHandling.

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

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more