Estoy tratando de actualizar (agregar, eliminar) queryParams de un componente. En angularJS, solía ser posible gracias a:
$location.search('f', 'filters[]'); // setter $location.search()['filters[]']; // getterTengo una aplicación con una lista que el usuario puede filtrar, ordenar, etc. y me gustaría configurar 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 vuelva a cargar cada vez que se seleccione un filtro.
¿Es esto factible con el nuevo enrutador?
Puede navegar a la ruta actual con nuevos parámetros de consulta, que no recargarán su página, pero actualizarán los parámetros de consulta.
Algo como (en el componente):
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, si bien no recargará la página, generará una nueva entrada en el historial del navegador. Si desea reemplazarlo en el historial en lugar de agregar un nuevo valor allí, puede usar { queryParams: queryParams, replaceUrl: true } .
EDITAR: Como ya se señaló en los comentarios, [] y la propiedad relativeTo faltaban en mi ejemplo original, por lo que también podría haber cambiado la ruta, no solo los parámetros de consulta. El uso correcto this.router.navigate será en este caso:
this.router.navigate( [], { relativeTo: this.activatedRoute, queryParams: { myParam: 'myNewValue' }, queryParamsHandling: 'merge' }); Establecer el valor del nuevo parámetro en null eliminará el parámetro de la URL.
La respuesta de @Radosław Roszkowiak es casi correcta, excepto que se requiererelativeTo relativeTo: this.route como se muestra a continuación:
constructor( private router: Router, private route: ActivatedRoute, ) {} changeQuery() { this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }}); }En Angular 5 puede obtener y modificar fácilmente una copia de 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 createUrlTree como se muestra a continuación, que crea un nuevo UrlTree a partir del actual y 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 manera, puede establecerlo en undefined o null .