我想传递一个查询参数prop=xxx。
这行不通
<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
Somewhere
</a>
我想传递一个查询参数prop=xxx。
这行不通
<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
Somewhere
</a>
当前回答
你也可以看看这个。
<router-link
:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"
>
link name
</router-link
>
其他回答
queryParams
queryParams是routerLink的另一个输入,它们可以像这样传递
<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>
片段
<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>
routerLinkActiveOptions
获取父路由上的激活类:
[routerLinkActiveOptions]="{ exact: false }"
将查询参数传递给this.router.navigate(…
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
参见https://angular.io/guide/router#query-parameters-and-fragments
对于那些想要传递动态查询字符串参数的人,这对我来说是有效的:
假设您有组件模型
x = {name:'xyz'}
html:
<a [routerLink]="['../']" [queryParams]="{prop: x.name}">Somewhere</a>
这将生成链接:
../?prop=xyz
<a [routerLink]="['../']" [queryParams]="{name: 'ferret'}" [fragment]="nose">Ferret Nose</a>
foo://example.com:8042/over/there?name=ferret#nose
\_/ \______________/\_________/ \_________/ \__/
| | | | |
scheme authority path query fragment
欲知详情- https://angular.io/guide/router#query-parameters-and-fragments
你也可以看看这个。
<router-link
:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"
>
link name
</router-link
>