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.
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.
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.
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
.
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
Outputpopular
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.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.