pathmatch - router navigate angular 5

Angular: cómo actualizar queryParams sin cambiar la ruta

Question

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[]''];    // getter

Tengo una aplicación 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 vuelva a cargar cada vez que se selecciona un filtro.

¿Es factible con el nuevo enrutador?

Answer 1

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 createUrlTree a continuación, que crea un nuevo UrlTree a partir del actual y nos permite modificarlo mediante 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 configurarlo como undefined o null .

Answer 2

La respuesta con más votos me funcionó parcialmente. La URL del navegador se mantuvo igual pero mi routerLinkActive ya no funcionaba después de la navegación.

Mi solución fue usar lotation.go:

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

Usé HttpParams para construir la cadena de consulta ya que ya la estaba usando para enviar información con httpClient. pero puedes construirlo tú mismo.

y this._router.url.split("?")[0] , es eliminar toda la cadena de consulta anterior de la url actual.

Answer 3

La respuesta de @Radosław Roszkowiak es casi correcta, excepto que relativeTo: this.route se requiere de la siguiente manera:

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate([''.''], { relativeTo: this.route, queryParams: { ... }});
}

Answer 4

Primero, necesitamos importar el módulo del enrutador del enrutador angular y declarar su nombre de alias

import { Router } from ''@angular/router''; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1. Puede cambiar los parámetros de consulta utilizando la función "router.navigate" y pasar los parámetros de consulta

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

Actualizará los parámetros de consulta en la ruta actual, es decir, activada

2. Lo siguiente redirigirá a la página abc con _id, day y name como parámetros de consulta

   this.router.navigate ([''/ abc''], {queryParams: {_id: "abc", día: "1", nombre: "dfd"}});

   Actualizará los parámetros de consulta en la ruta "abc" junto con tres parámetros de consulta

Para buscar parámetros de consulta: -

    import { ActivatedRoute } from ''@angular/router''; //import activated routed

    export class ABC implements OnInit {

    constructor(
        private route: ActivatedRoute //declare its alias name
      ) {}

    ngOnInit(){
       console.log(this.route.snapshot.queryParamMap.get(''_id'')); //this will fetch the query params
    }

Answer 5

Puede navegar a la ruta actual con nuevos parámetros de consulta, que no volverán a cargar 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 volverá a cargar la página, empujará una nueva entrada al 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 faltaba en mi ejemplo original, por lo que también podría haber cambiado la ruta, no solo los parámetros de consulta. El uso apropiado 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 en null eliminará el parámetro de la URL.

Answer 6

Si desea cambiar los parámetros de consulta sin cambiar la ruta. ver el ejemplo a continuación podría ayudarlo: la ruta actual es: / search & La ruta de destino es (sin la página de recarga): / search? query = love

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

tenga en cuenta: puede usar this.router.navigate ([''search''] en lugar de this.router.navigate ([''.'']

Answer 7

Tratar

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

funcionará para la misma navegación de ruta que no sean comillas simples.