Angular2 Routerlink：添加查询参数

Question

如何向 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>

?

Answer 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');
}

Answer 2

OP（发帖人）询问如何通过路由器 link 添加 查询参数 ，而不是 路由器参数 as @ SaUrAbH MaUrYa 回答了。

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

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

Angular2 Routerlink：添加查询参数

Angular2 Routerlink: add query parameters

angular2-routing

angular