angular2-routing - 如何在不导航到路由的情况下更改 Angular2 路由参数？

Question

我有一个 angular2 页面显示项目列表。我最初通过使用路由参数来限制列表，所以我的 URL 类似于:

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

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

然后用户添加了第三个国家(比如说 8 个)，我进行了更新列表的服务调用。由于列表项绑定(bind)到一个可观察的列表，因此列表会在屏幕上更新。

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

为了解决这个问题，我使用:

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

这将使用此路由重新加载页面:

http://localhost:54675/#/listing?filter={"Country":[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);