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

Question

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

---

现在我想以searchString查询参数的形式显示URL.(使用新路由器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

如果您查看Router类声明,您可以找到:

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

如果导航成功与否,它还会返回带有值的promise.

导航(命令:any [],extras？:NavigationExtras):承诺;

命令 - 路由器的命令数组,用于导航;

extras - 可选参数,您可以在其中指定查询参数等其他属性

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

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

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

其中空数组表示位置不会更改,而在附加项中,我使用具有属性的对象定义查询参数.

Angular将该对象解析为以下内容:

siteBasePath/routerDirectory？propertyName的=的PropertyValue

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

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