我在/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

最佳答案

如果您查看路由器类声明,您会发现:
基于提供的命令数组和起点导航。
如果没有提供起始路线,则导航是绝对的。
同时,如果导航成功与否,它将返回带值的promise。
导航(命令:任何[],附加项?:navigationextras):承诺;
命令-一组命令到路由器的导航位置;
extras-可选参数,用于指定其他属性,如查询参数
如果您查看NavigationExtras类,您将发现不仅可以为路由器指定查询参数,还可以设置保留以前的查询参数等。
我使用了如下导航方法:

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

其中空数组意味着位置不会改变,在extras中,我使用带属性的对象定义查询参数。
Angular将该对象分解为如下内容:
sitebasepath/路由目录?propertyName=属性值
以下是我发现非常有用的更多有用信息和示例:http://vsavkin.tumblr.com/post/145672529346/angular-router
我希望有人会觉得这个有用。

10-05 20:51
查看更多