Sudut: Cara update queryParams tanpa mengubah rute

Anda dapat menavigasi untuk saat ini rute dengan permintaan baru params, yang tidak akan reload halaman anda, tapi akan update query params.

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

Catatan, yang padahal itu tidak't reload halaman, itu akan mendorong entri baru ke browser's sejarah. Jika anda ingin menggantinya dalam sejarah bukannya menambahkan nilai baru ke sana, anda bisa menggunakan { queryParams: queryParams, replaceUrl: true }.

EDIT: Seperti telah di kemukakan dalam komentar, [] dan relativeTo properti yang hilang dalam contoh asli, sehingga bisa berubah rute juga, tidak hanya permintaan params. Yang tepat ini.router.menavigasi penggunaan akan dalam kasus ini:

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

Pengaturan nilai parameter baru untuk null akan menghapus param dari URL.

@Radosław Roszkowiak's jawaban hampir benar kecuali yang relativeTo: ini.rute diperlukan sebagai berikut:

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

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

Di Sudut 5 anda dapat dengan mudah memperoleh dan memodifikasi salinan urlTree oleh parsing url saat ini. Ini akan mencakup permintaan params dan fragmen.

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

  this.router.navigateByUrl(urlTree); 

"benar" untuk memodifikasi parameter kueri mungkin dengan createUrlTree seperti di bawah ini yang menciptakan yang baru UrlTree dari saat ini sementara membiarkan kita memodifikasinya dengan 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); 
}

Dalam rangka untuk menghapus query parameter dengan cara ini anda dapat mengaturnya untuk undefined atau null.

Mencoba

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

akan bekerja untuk rute yang sama navigasi lain dari tanda kutip tunggal.

Jika anda ingin mengubah query params tanpa mengubah rute. lihat di bawah ini contoh yang mungkin bisa membantu anda: rute saat ini adalah : /cari & Target rute(tanpa reload halaman) : /search?query=cinta

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

harap catatan : anda dapat menggunakan ini.router.menavigasi( ['cari'] bukan ini.router.menavigasi( ['.']

Jawaban dengan memilih sebagian bekerja untuk saya. Url browser tetap sama tapi saya routerLinkActive tidak lagi bekerja setelah navigasi.

Solusi saya adalah untuk menggunakan lotation.pergi:

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

Aku digunakan HttpParams untuk membangun query string karena saya sudah menggunakannya untuk mengirim informasi dengan httpClient. tapi anda hanya dapat membangun sendiri.

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

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

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

1. Anda dapat mengubah query params dengan menggunakan "router.menavigasi" fungsi dan lulus parameter kueri

ini.router.menavigasi([], { queryParams: {_id: "abc", di malam hari: "1", nama: "dfd"} });

Ini akan memperbarui kueri params di saat aku.e diaktifkan rute

2. Di bawah ini akan mengarahkan ke abc halaman dengan _id, hari dan nama query params

ini.router.menavigasi(['/abc'], { queryParams: {_id: "abc", di malam hari: "1", nama: "dfd"} });

Ini akan memperbarui kueri params di "abc" rute bersama dengan tiga permintaan paramters

Untuk mengambil query params:-

    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
    }