¿Cómo obtener parámetros de consulta de URL en Angular 5?
Estoy usando angular 5.0.3, me gustaría iniciar mi aplicación con un montón de parámetros de consulta como /app?param1=hallo¶m2=123. Todos los consejos dados en ¿Cómo obtener parámetros de consulta de la URL en Angular 2? no me funciona.
¿Alguna idea de cómo hacer que funcionen los parámetros de consulta?
private getQueryParameter(key: string): string {
const parameters = new URLSearchParams(window.location.search);
return parameters.get(key);
}
Esta función privada me ayuda a obtener mis parámetros, pero no creo que sea la forma correcta en el nuevo entorno Angular.
[actualización:] Mi aplicación principal se ve así
@Component({...})
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// would like to get query parameters here...
// this.route...
}
}
En Angular 5, se accede a los parámetros de consulta suscribiéndose a this.route.queryParams(tenga en cuenta que las versiones posteriores de Angular recomiendan queryParamMap , consulte también otras respuestas).
Ejemplo:/app?param1=hallo¶m2=123
param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
console.log('Called Constructor');
this.route.queryParams.subscribe(params => {
this.param1 = params['param1'];
this.param2 = params['param2'];
});
}
mientras que a las variables de ruta se accede mediantethis.route.snapshot.params
Ejemplo:/param1/:param1/param2/:param2
param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
this.param1 = this.route.snapshot.params.param1;
this.param2 = this.route.snapshot.params.param2;
}
Esta es la solución más limpia para mí.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
export class MyComponent {
constructor(
private route: ActivatedRoute
) {}
ngOnInit() {
const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
}
}
Sé que OP solicitó la solución Angular 5, pero aún así, para todos los que se topan con esta pregunta sobre las versiones más nuevas (6+) de Angular. Citando los documentos , con respecto a ActivatedRoute.queryParams (en los que se basan la mayoría de las otras respuestas):
Todavía hay dos propiedades más antiguas disponibles. Son menos capaces que sus reemplazos, se desaconsejan y pueden quedar obsoletos en una futura versión de Angular.
params: un Observable que contiene los parámetros requeridos y opcionales específicos de la ruta. Utilice paramMap en su lugar.
queryParams: un observable que contiene los parámetros de consulta disponibles para todas las rutas. Utilice queryParamMap en su lugar.
Según los Docs , la forma sencilla de obtener los parámetros de consulta sería la siguiente:
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.param1 = this.route.snapshot.paramMap.get('param1');
this.param2 = this.route.snapshot.paramMap.get('param2');
}
Para conocer formas más avanzadas (por ejemplo, reutilización avanzada de componentes), consulte este capítulo de Documentos.
EDITAR:
Como se indica correctamente en los comentarios a continuación, esta respuesta es incorrecta , al menos para el caso especificado por OP.
OP solicita obtener parámetros de consulta globales (/app?param1=hallo¶m2=123); en este caso deberías usar queryParamMap (como en la respuesta de @dapperdan1985 ).
paramMap, por otro lado, se utiliza en parámetros específicos de la ruta (por ejemplo, /app/:param1/:param2, lo que da como resultado /app/hallo/123).
Gracias a @JasonRoyle y @daka por señalarlo .
