Angular: Cách cập nhật queryParams mà không cần thay đổi tuyến đường

Tôi đang cố gắng cập nhật (thêm, xóa) queryParams từ một thành phần. Trong angleJS, nó từng có thể thực hiện được nhờ:

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

Tôi có một ứng dụng với danh sách mà người dùng có thể lọc, đặt hàng, v.v. và tôi muốn đặt trong queryParams của url tất cả các bộ lọc được kích hoạt để anh ta có thể sao chép / dán url hoặc chia sẻ nó với người khác.

Tuy nhiên, tôi không muốn tải lại trang của mình mỗi khi bộ lọc được chọn.

Điều này có khả thi với bộ định tuyến mới không?

Bạn có thể điều hướng đến tuyến đường hiện tại với các tham số truy vấn mới, điều này sẽ không tải lại trang của bạn, nhưng sẽ cập nhật các tham số truy vấn.

Một cái gì đó như (trong thành phần):

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

Lưu ý rằng trong khi nó sẽ không tải lại trang, nó sẽ đẩy một mục mới vào lịch sử của trình duyệt. Nếu bạn muốn thay thế nó trong lịch sử thay vì thêm giá trị mới vào đó, bạn có thể sử dụng { queryParams: queryParams, replaceUrl: true }.

CHỈNH SỬA: Như đã được chỉ ra trong các nhận xét, []và thuộc relativeTotính bị thiếu trong ví dụ ban đầu của tôi, vì vậy nó cũng có thể thay đổi tuyến đường, không chỉ tham số truy vấn. Cách this.router.navigatesử dụng thích hợp sẽ là trong trường hợp này:

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

Đặt giá trị tham số mới thành nullsẽ xóa tham số khỏi URL.

Câu trả lời của @ Radosław Roszkowiak gần như đúng ngoại trừ điều đó relativeTo: this.routeđược yêu cầu như sau:

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

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

Trong Angular 5, bạn có thể dễ dàng lấy và sửa đổi bản sao của urlTree bằng cách phân tích cú pháp url hiện tại. Điều này sẽ bao gồm các tham số và phân đoạn truy vấn.

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

  this.router.navigateByUrl(urlTree); 

"Cách đúng" để sửa đổi tham số truy vấn có thể là với createUrlTree như bên dưới, tạo một UrlTree mới từ hiện tại trong khi cho phép chúng tôi sửa đổi nó bằng 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); 
}

Để xóa tham số truy vấn theo cách này, bạn có thể đặt nó thành undefinedhoặc null.

Thử

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

sẽ hoạt động cho điều hướng tuyến đường tương tự ngoài dấu ngoặc kép.

Câu trả lời với hầu hết phiếu bầu một phần phù hợp với tôi. Url của trình duyệt vẫn giữ nguyên nhưng của tôi routerLinkActivekhông còn hoạt động sau khi điều hướng.

Giải pháp của tôi là sử dụng 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());
  }
}

Tôi đã sử dụng HttpParams để xây dựng chuỗi truy vấn vì tôi đã sử dụng nó để gửi thông tin với httpClient. nhưng bạn chỉ có thể tự xây dựng nó.

và this._router.url.split("?")[0], là xóa tất cả chuỗi truy vấn trước đó khỏi url hiện tại.

Tôi đã kết hợp urlTreevớilocation.go

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

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

Không chắc liệu toStringcó thể gây ra sự cố hay không, nhưng thật không may location.go, dường như là dựa trên chuỗi.

Nếu bạn muốn thay đổi các tham số truy vấn mà không thay đổi lộ trình. xem ví dụ dưới đây có thể giúp bạn: tuyến đường hiện tại là: / tìm kiếm & Tuyến đường mục tiêu là (không tải lại trang): / search? query = love

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

xin lưu ý: bạn có thể sử dụng this.router.navigate (['search'] thay vì this.router.navigate (['.']

Đầu tiên, chúng ta cần nhập mô-đun bộ định tuyến từ bộ định tuyến góc và khai báo tên bí danh của nó

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

1. Bạn có thể thay đổi các tham số truy vấn bằng cách sử dụng hàm "router.navigate" và chuyển các tham số truy vấn

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

Nó sẽ cập nhật các tham số truy vấn trong lộ trình hiện tại tức là đã kích hoạt

2. Bên dưới sẽ chuyển hướng đến trang abc với _id, ngày và tên dưới dạng tham số truy vấn

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

   Nó sẽ cập nhật các tham số truy vấn trong tuyến "abc" cùng với ba tham số truy vấn

Để tìm nạp các tham số truy vấn: -

    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
    }