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

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

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

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

Answer 2

如果您需要的内容为/search?q=asdf，则可以使用：

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

//And to generate router Links use:

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

这会将href标记生成为<a href="/search"，但点击锚标记会引导您进入网址/search?q=asdf。 [queryParams]将允许您使用“？”添加查询参数，否则它们将被“;”附加。您可以使用以下内容在SearchCmp中获取此参数：

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

Angular2 Routerlink：添加查询参数

2 个答案: