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

问题描述

我在 /contacts 注册了一个组件，它显示了一个联系人列表.我添加了一个 用于过滤显示的列表.

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?

推荐答案

如果您查看 Router 类声明，您会发现:

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.

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

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

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

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 新路由器:更改/设置查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！