Angular: Jak zaktualizować queryParams bez zmiany trasy

Próbuję zaktualizować (dodać, usunąć) queryParams ze składnika. W angularJS było to możliwe dzięki:

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

Mam aplikację z listą, którą użytkownik może filtrować, porządkować itp. I chciałbym ustawić w queryParams adresu URL wszystkie filtry aktywowane, aby mógł skopiować / wkleić adres URL lub udostępnić go komuś innemu.

Nie chcę jednak, aby moja strona była ładowana ponownie po każdym wybraniu filtru.

Czy da się to zrobić z nowym routerem?

Możesz przejść do aktualnej trasy z nowymi parametrami zapytania, które nie przeładują strony, ale zaktualizują parametry zapytania.

Coś takiego (w komponencie):

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

Zwróć uwagę, że chociaż nie ładuje ponownie strony, wypchnie nowy wpis do historii przeglądarki. Jeśli chcesz zamienić go w historii zamiast dodawać tam nową wartość, możesz użyć { queryParams: queryParams, replaceUrl: true }.

EDYCJA: Jak już wskazano w komentarzach, w moim oryginalnym przykładzie brakowało []tej relativeTowłaściwości, więc mogła również zmienić trasę, a nie tylko parametry zapytania. Prawidłowe this.router.navigateużycie będzie w tym przypadku:

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

Ustawienie nowej wartości parametru na nullspowoduje usunięcie parametru z adresu URL.

Odpowiedź @ Radosława Roszkowiaka jest prawie poprawna, ale relativeTo: this.routejest to wymagane, jak poniżej:

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

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

W Angular 5 możesz łatwo uzyskać i zmodyfikować kopię urlTree , analizując bieżący adres URL. Obejmuje to parametry i fragmenty zapytań.

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

  this.router.navigateByUrl(urlTree); 

„Prawidłowym sposobem” modyfikacji parametru zapytania jest prawdopodobnie użycie createUrlTree, jak poniżej, które tworzy nowe UrlTree z bieżącego, jednocześnie pozwalając nam modyfikować go za pomocą 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); 
}

Aby w ten sposób usunąć parametr zapytania, możesz ustawić go na undefinedlub null.

Próbować

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

będzie działać dla nawigacji po tej samej trasie, z wyjątkiem pojedynczych cudzysłowów.

Odpowiedź z większością głosów częściowo mi pomogła. Adres URL przeglądarki pozostał taki sam, ale mój routerLinkActivenie działał po nawigacji.

Moim rozwiązaniem było użycie 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());
  }
}

Użyłem HttpParams do zbudowania ciągu zapytania, ponieważ używałem go już do wysyłania informacji za pomocą httpClient. ale możesz po prostu zbudować go samodzielnie.

a this._router.url.split("?")[0], służy do usunięcia całego poprzedniego ciągu zapytania z bieżącego adresu URL.

Skończyło się na połączeniu urlTreezlocation.go

const urlTree = this.router.createUrlTree([], {
       relativeTo: this.route,
       queryParams: {
           newParam: myNewParam,
       },
       queryParamsHandling: 'merge',
    });

    this.location.go(urlTree.toString());

Nie jestem pewien, czy toStringmoże powodować problemy, ale niestety location.gowydaje się, że jest oparty na ciągach.

Jeśli chcesz zmienić parametry zapytania bez zmiany trasy. zobacz poniższy przykład może ci pomóc: aktualna trasa to: / search & Docelowa trasa to (bez strony przeładowania): / search? query = love

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

uwaga: możesz użyć this.router.navigate (['szukaj'] zamiast this.router.navigate (['.']

Najpierw musimy zaimportować moduł routera z routera kątowego i zadeklarować jego alias

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

1. Możesz zmienić parametry zapytania za pomocą funkcji „router.navigate” i przekazać parametry zapytania

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

Zaktualizuje parametry zapytania w bieżącej, tj. Aktywowanej trasie

2. Poniższe przekieruje do strony abc z _id, dniem i nazwą jako parametrami zapytania

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

   Zaktualizuje parametry zapytania w trasie „abc” wraz z trzema parametrami zapytania

Aby pobrać parametry zapytania: -

    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
    }