如何在不导航到路线的情况下更改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);