Angular: Cara memperbarui queryParams tanpa mengubah rute

Saya mencoba memperbarui (menambah, menghapus) queryParams dari sebuah komponen. Di angularJS, itu dulunya mungkin berkat:

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

Saya memiliki aplikasi dengan daftar yang dapat difilter, dipesan, dll. Dan saya ingin menyetel di queryParams dari url semua filter yang diaktifkan sehingga dia dapat menyalin / menempel url atau membagikannya dengan orang lain.

Namun, saya tidak ingin halaman saya dimuat ulang setiap kali filter dipilih.

Apakah ini bisa dilakukan dengan router baru?

Anda dapat menavigasi ke rute saat ini dengan parameter kueri baru, yang tidak akan memuat ulang halaman Anda, tetapi akan memperbarui parameter kueri.

Sesuatu seperti (dalam komponen):

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

Perhatikan, meskipun tidak memuat ulang halaman, ini akan mendorong entri baru ke riwayat browser. Jika Anda ingin menggantinya dalam sejarah daripada menambahkan nilai baru di sana, Anda bisa menggunakan { queryParams: queryParams, replaceUrl: true }.

EDIT: Seperti yang sudah ditunjukkan di komentar, []dan relativeToproperti hilang dalam contoh asli saya, jadi itu bisa mengubah rute juga, bukan hanya parameter kueri. Penggunaan yang tepat this.router.navigatedalam hal ini:

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

Mengatur nilai parameter baru menjadi nullakan menghapus parameter dari URL.

Jawaban @ Radosław Roszkowiak hampir benar kecuali relativeTo: this.routediperlukan seperti di bawah ini:

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

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

Di Angular 5 Anda dapat dengan mudah mendapatkan dan memodifikasi salinan urlTree dengan mengurai url saat ini. Ini akan menyertakan parameter dan fragmen kueri.

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

  this.router.navigateByUrl(urlTree); 

"Cara yang benar" untuk mengubah parameter kueri mungkin dengan createUrlTree seperti di bawah ini yang membuat UrlTree baru dari saat ini sambil membiarkan kami memodifikasinya menggunakan 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); 
}

Untuk menghapus parameter kueri dengan cara ini Anda dapat mengaturnya ke undefinedatau null.

Mencoba

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

akan berfungsi untuk navigasi rute yang sama selain tanda kutip tunggal.

Jawaban dengan suara terbanyak sebagian berhasil untuk saya. Url browser tetap sama tetapi url saya routerLinkActivetidak lagi berfungsi setelah navigasi.

Solusi saya adalah menggunakan 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());
  }
}

Saya menggunakan HttpParams untuk membangun string kueri karena saya sudah menggunakannya untuk mengirim informasi dengan httpClient. tapi Anda bisa membuatnya sendiri.

dan this._router.url.split("?")[0], adalah untuk menghapus semua string kueri sebelumnya dari url saat ini.

Saya akhirnya menggabungkan urlTreedenganlocation.go

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

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

Tidak yakin apakah toStringdapat menyebabkan masalah, tetapi sayangnya location.go, tampaknya berbasis string.

Jika Anda ingin mengubah parameter kueri tanpa mengubah rute. lihat contoh di bawah ini dapat membantu Anda: rute saat ini adalah: / search & Target route adalah (tanpa halaman reload): / search? query = love

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

harap dicatat: Anda dapat menggunakan this.router.navigate (['search'] daripada this.router.navigate (['.']

Pertama, kita perlu mengimpor modul router dari router sudut dan menyatakan nama aliasnya

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

1. Anda dapat mengubah parameter kueri dengan menggunakan fungsi "router.navigate" dan meneruskan parameter kueri

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

Ini akan memperbarui parameter kueri di rute yaitu diaktifkan saat ini

2. Di bawah ini akan dialihkan ke halaman abc dengan _id, hari dan nama sebagai parameter kueri

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

   Ini akan memperbarui parameter kueri di rute "abc" bersama dengan tiga parameter kueri

Untuk mengambil parameter kueri: -

    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
    }