web-dev-qa-db-fra.com

Angular: Comment mettre à jour queryParams sans changer de route

J'essaie de mettre à jour (ajouter, supprimer) queryParams à partir d'un composant. Dans angularJS, cela était possible grâce à:

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

J'ai une application avec une liste que l'utilisateur peut filtrer, ordonner, etc. et j'aimerais définir dans les queryParams de l'URL tous les filtres activés afin qu'il puisse copier/coller l'URL ou la partager avec quelqu'un d'autre.

Cependant, je ne veux pas que ma page soit rechargée à chaque fois qu'un filtre est sélectionné.

Est-ce faisable avec le nouveau routeur?

angularquery-parametersangular-router
74
Olivier

Vous pouvez naviguer vers l'itinéraire actuel avec de nouveaux paramètres de requête, qui ne rechargeront pas votre page, mais mettront à jour les paramètres de requête.

Quelque chose comme (dans le composant):

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
    });
}

Notez que s'il ne recharge pas la page, il insère une nouvelle entrée dans l'historique du navigateur. Si vous souhaitez le remplacer dans l'historique au lieu d'y ajouter une nouvelle valeur, vous pouvez utiliser { queryParams: queryParams, replaceUrl: true }.

EDIT: Comme déjà signalé dans les commentaires, [] et la propriété relativeTo étaient manquants dans mon exemple initial. Elle aurait donc pu modifier également l'itinéraire, pas seulement les paramètres de requête. Le bon usage de this.router.navigate sera dans ce cas:

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

Définir la nouvelle valeur du paramètre sur null supprimera le paramètre de l'URL.

172
Radosław Roszkowiak

La réponse de @ Radosław Roszkowiak est presque exacte, sauf que relativeTo: this.route est requis comme ci-dessous:

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

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

Dans Angular 5, vous pouvez facilement obtenir et modifier une copie de rlTree en analysant l’URL actuelle. Cela inclura des paramètres de requête et des fragments.

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

  this.router.navigateByUrl(urlTree);

La "manière correcte" de modifier un paramètre de requête est probablement avec le createUrlTree comme ci-dessous, qui crée un nouvel UrlTree à partir du courant tout en nous permettant de le modifier à l'aide de 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); 
}

Afin de supprimer un paramètre de requête de cette façon, vous pouvez le définir sur undefined ou null.

9
bjornalm

Essayer

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

fonctionnera pour le même itinéraire de navigation autre que les guillemets simples.

4
Prudhvi Raj

Si vous souhaitez modifier les paramètres de requête sans modifier l'itinéraire. Voir l'exemple ci-dessous pourrait vous aider: l'itinéraire actuel est: / search & l'itinéraire cible est (sans recharger la page): / search? query = love

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

veuillez noter que vous pouvez utiliser this.router.navigate (['search']) au lieu de this.router.navigate (['.']]

4
Azeem Chauhan

La réponse avec le plus de vote a partiellement fonctionné pour moi. L'URL du navigateur est resté le même mais mon routerLinkActive ne fonctionnait plus après la navigation.

Ma solution était d'utiliser 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());
  }
}

J'ai utilisé HttpParams pour construire la chaîne de requête car je l'utilisais déjà pour envoyer des informations avec httpClient. mais vous pouvez simplement le construire vous-même.

et la this._router.url.split("?")[0] consiste à supprimer toutes les chaînes de requête précédentes de l'URL actuelle.

2
moi_meme

Premièrement, nous devons importer le module de routeur de angular routeur et déclarer son nom d'alias.

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

1. Vous pouvez modifier les paramètres de la requête en utilisant la fonction "router.navigate" et en transmettant les paramètres de la requête.

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

Il mettra à jour les paramètres de requête dans la route actuellement activée i.e

  1. Ce qui suit sera redirigé vers une page abc avec _id, day et name en tant que paramètres de requête

    this.router.navigate (['/ abc'], {queryParams: {_id: "abc", jour: "1", nom: "dfd"}});

    Il mettra à jour les paramètres de requête dans la route "abc" avec trois paramètres de requête

Pour récupérer les paramètres de requête: -

    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
    }
0
VIKAS KOHLI