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>