如何在不导航到路线的情况下更改Angular2路线参数？

Question

我有一个angular2页面显示了一个项目列表。我最初使用路由参数来限制列表，因此我的URL类似于：

  

http://localhost:54675/#/listing?filter= {“Country”：[6,7]}

这将显示国家/地区ID为6或7的项目。

然后用户添加了第三个国家（比方说8）并且我进行了更新列表的服务调用。由于列表项绑定到可观察的列表，因此在屏幕上更新。

这正是我想要的行为。但是，如果用户为此页面添加书签，则只能获取原始路由参数，而不是过滤结果。

要解决此问题，我使用：

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

这将使用此路线重新加载页面：

  

http://localhost:54675/#/listing?filter= { “国家”：[6,7,8]}

这可以使所有内容保持同步并且书签正常工作。但是，有一个完整的页面刷新。其他项目再次加载 - 不仅仅是过滤后的结果。当只是一个服务电话时，我也更喜欢视觉效果。

我需要一种方法来更改路由参数而无需重新加载页面。

Answer 1

您只能使用Router创建网址，然后使用Location更改网址而无需导航。

这样的事情：

multipart/related

Answer 2

对于仍然找不到合适解决方案的任何人，请尝试以下操作：

this._router.navigate([], { 
 relativeTo: this.activatedRoute,
 queryParams: {
   filter: newfilter
 },
 queryParamsHandling: 'merge'
});

导航到同一路线时，该网站不会重新加载！