Question

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

现在，我想以查询参数的形式在网址中显示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

如果查看Router类声明，可以找到：

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

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

导航（命令：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

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

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

1 个答案: