angular2和路由-向子级添加查询参数

问题描述

哇

this.router.navigate(['/services', {outlets: {'servicelistright': ['servicelist']}}]);

如果我将下面的网址显示在以下网址，则会使用以下内容获取查询参数:

If I the below to the url I get get the query parm using the below:

         http://localhost:4200/#/services/(servicelistright:servicelist;type=11)

this.route.params.map(params => params['type'])
            .subscribe(type => { console.log('stupid',type) });

好吧，我认为那太好了...哇...

Well I think is just wonderful..wow great...

但是我到底该如何添加查询参数?

But how on earth do I add the query parm?

1)通过使用router.navigate

1) by using router.navigate

this.router.navigate(['/services', {outlets: {'servicelistright': ['servicelist']}}]);

我在哪里添加type = 11 ???

where do I add type=11???

或者我的routerLink

Or my routerLink

<a md-raised-button  routerLinkActive="['active']" [routerLink]="['/services']" ">Raised button</a>

推荐答案

参数以对象的形式传递给路由.例如，要获取以下查询字符串:

Parameters are passed to the route in a form of an object. For example, to get this query string:

/inbox/33;details=true/messages/44;mode=preview

您需要使用以下数组:

['/inbox', 33, {details: true}, 'messages', 44, {mode: 'preview'}]

因此，您可以将类似的type参数传递给router.navigate:

So in your case you can pass the type param like that to router.navigate:

this.router.navigate(['/services', {outlets: {'servicelistright': ['servicelist', {type: 11}]}}]);

在后台，routerLink仅调用router.navigate，因此您可以将相同的URL字符串传递给指令:

behind the scenes, routerLink just calls router.navigate, so you can pass the same URL string to the directive:

<a [routerLink]="['/services', {outlets: {'servicelistright': ['servicelist', {type: 11}]}}]">Go</a>

这篇关于angular2和路由-向子级添加查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！