如何在不导航到路线的情况下更改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 = {"Country":[6,7,8]}

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

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

Answer 1

您只能使用路由器创建URL,然后使用位置更改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);