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

Question

哇

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

如果我在下面的 url 我得到使用下面的查询参数：

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

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

好吧，我认为这真是太棒了……哇太棒了……

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

1）通过使用 router.navigate

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

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

或者我的路由器链接

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

Answer 1

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

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

您需要使用以下数组：

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

因此，在您的情况下，您可以将这样的type参数传递给router.navigate：

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

在幕后，routerLink只需调用router.navigate，因此您可以将相同的URL字符串传递给指令：

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