<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

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

你也可以看看这个。

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

>
 link name

 </router-link
>

<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

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

假设您有组件模型

x = {name:'xyz'}

html:

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

这将生成链接:

../?prop=xyz