angular - 如何通过 routerLink 指令指定查询参数

Question

我正在试验新路由器（版本 3.0.0-alpha.7），想知道如何通过 routerLink 指令指定查询参数？

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

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>

Answer 1

你可以做这样的事情

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

Answer 2

在新的路由器组件中，您可以这样做：

在 URL 中传递参数：

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

传递 e 查询参数：

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