Cách thêm/cập nhật tham số truy vấn trong Angular2

Question

Tôi đang sử dụng tham số truy vấn trong ứng dụng mà tôi muốn giữ lại/cập nhật khi điều hướng và cập nhật cài đặt. Tôi có thể thêm tham số mà không gặp bất kỳ sự cố nào bằng cách thực hiện các thao tác sau.

onNavigate() { 
this.router.navigate(['reports'], {queryParams: {'report': this.chart}, preserveQueryParams:true}); 
} 

Tuy nhiên tôi muốn có thể thay đổi thông số báo cáo và thêm thông số mới vào url trong ứng dụng của mình.

Sử dụng preserveQueryParams: true làm cho thông số của tôi chỉ đọc. Tôi muốn có thể cập nhật các thông số hiện tại và thêm các thông số mới mà không mất bất kỳ thứ gì trừ khi tôi xóa chúng.

Tôi làm cách nào để thực hiện điều này mà không làm mất các tham số hiện được đặt?

Answer 1

Tôi đoán preserveQueryParams không có nghĩa là chắp thêm/cập nhật queryParams thay mặt cho đơn đăng ký.

Bạn phải viết logic của mình để nhận thông số truy vấn hiện tại và cập nhật thông số theo yêu cầu của bạn và sau đó vượt qua trong khi điều hướng.

this.route.queryParams.subscribe(qparams => { 
    this.currentQueryParams= qparams; 
    }); 

    updatedqueryParams = // use this.currentQueryParams update it to append\update new stuff 
    let navigationExtras: NavigationExtras = { 
     queryParams: updatedqueryParams 
    }; 

    // Navigate to the login page with extras 
    this.router.navigate(['<some path>'], navigationExtras); 

gì preserveQueryParams có nghĩa là để vượt qua hiện tại toàn cầu queryParams bạn đang định tuyến để,

vì vậy nếu URL hiện tại là

dashboard?debug=true&somevar=1 

và bạn viết một cái gì đó như dưới đây,

this.router.navigate(['admin'], { 
     preserveQueryParams: true 
     } 
); 

tuyến mới sẽ có, do đó, nó sẽ bảo toàn thông số Truy vấn.

admin?debug=true&somevar=1 

Hy vọng điều này sẽ hữu ích !!

Answer 2

bảo lưuTrình truy cậpParams đã không được dùng nữa, thay vào đó hãy sử dụng queryParamsHandling.

truy vấnParamsHandling được sử dụng để định cấu hình chiến lược xử lý các tham số truy vấn cho điều hướng tiếp theo.

https://angular.io/api/router/NavigationExtras