Angular2 Routerlink：添加查询参数答案

【问题标题】：Angular2 Routerlink: add query parametersAngular2 Routerlink：添加查询参数
【发布时间】：2016-05-15 13:17:37
【问题描述】：

如何将查询参数添加到routerLink？

@RouteConfig {
   {path: '/search',   name: 'Search', component: SearchCmp}
}

假设我想路由到/search?q=asdf，

<a [routerLink]= " [ '/Search' , {q= 'asdf'}] ">Link 1</a>

这会解析为/search。

有没有办法在不使用的情况下添加查询参数：

this.router.navigate( ['Search', { q: 'asdf'}]);

或

<a href="/search?a=asdf"> Link 2 </a>

【问题讨论】：

是的，这和这个问题和答案一样：stackoverflow.com/questions/35188060/…
不，不是。我这个问题是关于查询参数而不是路由参数
请澄清。你想要一种通用的方式来添加 url 参数还是你正在寻找一种 Angular 的方式？
我正在寻找一种有角度的方式。 Link> 会触发页面重新加载
为什么需要查询参数？您正在处理 Angular 中的路由而不是查询。您的路线决定了查询，这意味着您需要路线参数...？

标签： angular angular2-routing

【解决方案1】：

如果你需要 /search?q=asdf 这样的东西，你可以简单地使用：

@RouteConfig {
   {path: '/search',   name: 'Search', component: SearchCmp}
}

//And to generate router Links use:

<a [routerLink]="['/Search']" [queryParams]="{q:'asdf'}"></a>

这将生成作为<a href="/search" 的href 标记，但单击锚标记将引导您到url /search?q=asdf。 [queryParams] 将允许您使用“？”添加查询参数，否则它们将被附加“;”。您可以使用以下方法在 SearchCmp 中获取此参数：

constructor(private _routeParams: RouteParams) {
   var queryParam = this._routeParams.get('q');
}

【讨论】：

哦，是的，就是这样。谢啦！有没有机会将 href 标签生成为 /search?q="asdf" ？
这没有回答原始问题。这样做：stackoverflow.com/a/39016381/1480995
正如@MichaelOryl 所说，这不能回答问题并产生像“search;q=asdf”这样的好奇网址

【解决方案2】：

OP（原始海报）询问如何通过路由器链接添加查询参数，而不是@SaUrAbH MaUrYa 回答的路由器参数。

添加查询参数需要使用[queryParams]绑定：

<a [routerLink]="['/users']" [queryParams]="{ page: 1 }">next page</a>

【讨论】：

这正是我想要的。 [queryParams] 属性绑定在动态生成链接时很有帮助，例如在*ngFor 循环中：```
{{a.Name}}

如何动态传递页码我尝试使用 [queryParams]="{ page: {{myPageVariable}} }" 但它不起作用

[queryParams]="{ page: myPageVariable }"