如何在不導航到路線的情況下更改Angular2路線參數？

Question

我有一個angular2頁面顯示項目列表。我最初限制列表中通過使用route paramters所以我的網址是一樣的東西：

http://localhost:54675/#/listing?filter= {「國家」：[6,7]}

這將顯示與該國的項目ID爲6或7.

然後用戶添加第三個國家（比方說8），然後我進行一次服務調用，更新列表。由於列表項綁定到可觀察列表，因此列表會在屏幕上更新。

這正是我想要的行爲。但是，如果用戶對此頁面進行書籤，他們只會獲得原始路線參數，而不會獲得過濾結果。

爲了解決這個問題，我使用：

this._router.navigate(['listing', { filter: newfilter }]); 

此重新加載頁面，這條路線：

http://localhost:54675/#/listing?filter= { 「國家」：[6,7,8]}

這使所有內容保持同步並且書籤可以正常工作。但是，有一整頁刷新。其他項目再次加載 - 不僅僅是過濾結果。當它只是一個服務電話時，我也更喜歡視覺效果。

我需要一種方法來更改路線參數，而無需重新加載頁面。

Answer 1

您只能使用Router創建URL，然後使用Location更改URL而不進行導航。

事情是這樣的：

import { Location } from '@angular/common'; 
import { Router } from '@angular/router'; 

// Generate the URL: 
let url = this.router.createUrlTree(['listing', { filter: newfilter }]).toString(); 

// Change the URL without navigate: 
this.location.go(url);