如何通过routerLink指令

时间:2016-07-13 03:26:59

标签: angular angular2-routing angular2-directives angular2-router angular2-router3

我正在试验新的路由器(版本3.0.0-alpha.7),想知道如何通过routerLink指令指定查询参数?

下面的Router.navigate()方法会生成类似http://localhost:3000/component-a?x=1

的网址
this.router.navigate(['/component-a'], {queryParams: {x: 1}});

但是,我无法弄清楚如何使用routerLink指令做同样的事情。像下面的模板返回解析器错误...

<a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a>

我能得到的最接近的是http://localhost:3000/component-a;x=1,它使用子路由的语法。

<a [routerLink]="['/component-a', {x:1}]">Component A</a>

2 个答案:

答案 0 :(得分:13)

你可以做这样的事情

<a [routerLink]="['/component-a']" [queryParams]="{x: 1}">Component A</a>

答案 1 :(得分:0)

在新的路由器组件中,您可以这样做:

在网址中传递参数:

BeforeClass

传递e查询参数:

<a [routerLink]="['/component-a', 1]">Component A</a>