Angular 2 新路由器：更改/设置查询参数

Question

我在/contacts 注册了一个组件，它显示了一个联系人列表。我添加了一个<input [value]="searchString"> 用于过滤显示的列表。

---

现在我想在 URL 中以查询参数的形式显示 searchString。 （使用新路由器 3.0.0 RC2）

官方文档 (https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters) 展示了如何使用 router.navigate 更改 queryParams。但这似乎很尴尬，因为我只想更改queryParams，而不必知道我目前在哪条路线：router.navigate(['/contacts'], {queryParams:{foo:42}})

（我知道如果我只是更改queryParams，它不会重新加载组件，但这仍然感觉不合适）

---

经过一些尝试，我发现router.navigate([], {queryParams:{foo:42}}) 有效。这样感觉好多了。

但我仍然不确定这是否是正确的方法。或者如果我错过了一些方法。

---

如何更改您的queryParams？

Answer 1

如果您查看路由器类声明，您会发现：

根据提供的命令数组和起点进行导航。 如果没有提供起始路线，则导航是绝对的。

如果导航成功与否，它还会返回带有值的承诺。

navigate(commands: any[], extras?: NavigationExtras): Promise;

commands - 到路由器的命令数组；

extras - 可选参数，用于指定查询参数等附加属性

如果你查看 NavigationExtras 类你会发现你不仅可以为 Router 指定查询参数，还可以设置保留以前的查询参数等。

我使用了这样的导航方法：

this.router.navigate([], {
        queryParams: objectWithProperties,
        relativeTo: this.activeRoute
    });

其中空数组意味着位置不会改变，而在附加功能中，我使用具有属性的对象定义查询参数。

Angular 将该对象解析为如下形式：

siteBasePath/routerDirectory?propertyName=propertyValue

以下是我认为非常有用的更多有用信息和示例：http://vsavkin.tumblr.com/post/145672529346/angular-router

我希望有人会觉得这很有用。