Angular: Cómo actualizar queryParams sin cambiar la ruta

Estoy tratando de actualizar (añadir, eliminar) queryParams de un componente. En angularJS, solía ser posible gracias a:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

Tengo una app con una lista que el usuario puede filtrar, ordenar, etc y me gustaría establecer en los queryParams de la url todos los filtros activados para que pueda copiar/pegar la url o compartirla con otra persona.

Sin embargo, no quiero que mi página se recargue cada vez que se selecciona un filtro.

¿Es esto posible con el nuevo router?

Jota.Toledo
Pregunta editada 6º octubre 2017 в 8:55
Programación
angular query-parameters angular-router
29º abril 2017 в 4:33
1 vista

Puede navegar a la ruta actual con nuevos parámetros de consulta, lo que no recargará su página, pero actualizará los parámetros de consulta.

Algo como (en el componente):

-- language-all: lang-js -->

constructor(private router: Router) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

Tenga en cuenta que, aunque no recargará la página, añadirá una nueva entrada al historial del navegador. Si desea reemplazarlo en la historia en lugar de añadir un nuevo valor allí, usted podría utilizar { queryParams: queryParams, replaceUrl: true }.

EDITAR: Como ya se ha señalado en los comentarios, [] y la propiedad relativeTo faltaba en mi ejemplo original, por lo que podría haber cambiado la ruta, así, no sólo los parámetros de consulta. El uso correcto de this.router.navigate será en este caso:

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });

Establecer el nuevo valor del parámetro a null eliminará el parámetro de la URL.

Phil
Respuesta editada 18º julio 2019 в 7:53
Comentarios (11)

En Angular 5 puedes obtener y modificar fácilmente una copia del urlTree analizando la url actual. Esto incluirá parámetros de consulta y fragmentos.

  let urlTree = this.router.parseUrl(this.router.url);
  urlTree.queryParams['newParamKey'] = 'newValue';

  this.router.navigateByUrl(urlTree);

La forma "correcta" de modificar un parámetro de consulta es probablemente con la función createUrlTree como el de abajo que crea un nuevo UrlTree a partir del actual mientras nos permite modificarlo usando NavigationExtras.

import { Router } from '@angular/router';

constructor(private router: Router) { }

appendAQueryParam() {

  const urlTree = this.router.createUrlTree([], {
    queryParams: { newParamKey: 'newValue' },
    queryParamsHandling: "merge",
    preserveFragment: true });

  this.router.navigateByUrl(urlTree); 
}

Para eliminar un parámetro de consulta de esta forma puedes establecerlo como undefined o null.

Comentarios (1)

Si desea cambiar los parámetros de la consulta sin cambiar la ruta, consulte el siguiente ejemplo ejemplo puede ayudarle: la ruta actual es : /buscar & La ruta de destino es(sin recargar la página) : /buscar?consulta=amor

submit(value: string) {
{ this.router.navigate( ['.'],  { queryParams: { query: value } })
    .then(_ => this.search(q));
}
search(keyword:any) { 
//do some activity using }

nota : puedes usar this.router.navigate( ['search'] en vez de this.router.navigate( ['.'].

Comentarios (1)