如何通过routerLink传递查询参数

小开

最佳答案

queryParams

queryParams是routerLink的另一个输入，它们可以像这样传递

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<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

小开

<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 < / p >

小开

你也可以看看这个。

 <router-link
 

:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"


>
link name


</router-link
>

小开

对于那些想要传递动态查询字符串参数的人，这对我来说是有效的:

假设您有组件模型

x = {name:'xyz'}

html:

<a [routerLink]="['../']" [queryParams]="{prop: x.name}">Somewhere</a>

这将生成链接:

../?prop=xyz