Angular 2 New Router:更改/设置查询参数 [英] Angular 2 New Router: Change / Set Query Params

问题描述

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

I have a component registered at /contacts, which displays a list of contacts. I've added an <input [value]="searchString"> for filtering the displayed list.

现在，我想以查​​询参数的形式在URL中显示searchString. (使用新路由器3.0.0 RC2)

Now I'd like to display the searchString within the URL in form of a Query Param. (Using the New Router 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}})

The official docs ( https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters ) show how to use router.navigate for changing the queryParams. But this seems awkward, because I just want to change the queryParams without having to know which route I'm currently at: router.navigate(['/contacts'], {queryParams:{foo:42}})

(我知道，如果我只是更改queryParams，它不会重新加载组件，但这仍然不适合编写)

(I know that it doesn't reload the component if I'm just changing the queryParams, but still this doesn't feel right to write)

经过几次尝试，我发现router.navigate([], {queryParams:{foo:42}})可以工作.感觉好多了.

After some attempts I figured out that router.navigate([], {queryParams:{foo:42}}) works. This feels way better.

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

But I'm still not sure if that's the right way. Or if I missed some method for this.

您如何更改queryParams?

推荐答案

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

If you look into Router class declaration you can find that:

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

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

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

Also it returns promise with value if navigation was successful or not.

navigate(命令:any []，其他功能?:NavigationExtras):答应；

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

commands-路由器到哪里导航的命令数组；

commands - array of commands to Router where to navigate;

extras-可选参数，您可以在其中指定其他属性，例如查询参数

extras - optional parameter where you specify additional properties like query parameters

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

If you look into NavigationExtras class you will find that not only you can specify query parameters to Router, but also set preserve previous query parameters etc.

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

I used navigate method like this:

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

其中空数组表示位置不变，另外，我使用带有属性的对象定义查询参数.

where empty array means that location does not change and in extras i define query parameters using object with properties.

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

Angular resolves that object into something like this:

siteBasePath/routerDirectory?propertyName = propertyValue

siteBasePath/routerDirectory?propertyName=propertyValue

这里有一些更有用的信息和示例，我发现它们非常有用: http://vsavkin .tumblr.com/post/145672529346/angular-router

Here are more useful information and examples which I found very useful: http://vsavkin.tumblr.com/post/145672529346/angular-router

我希望有人会觉得有用.

I hope someone will find this useful.

这篇关于Angular 2 New Router:更改/设置查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！