如何使用 routerLink 传递查询参数

Question

我想传递一个查询参数prop=xxx。

这没用

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

Answer 1

queryParams

queryParams 是 routerLink 的另一个输入，它们可以像

一样传递

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

fragment

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

routerLinkActiveOptions

同时在父路由上设置激活路由 class：

[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

Answer 2

<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

Answer 3

你也可以看看这个。

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

>
 link name

 </router-link
>

Answer 4

对于那些想要传递动态查询字符串参数的人，这对我有用：

假设您有组件模型

x = {name:'xyz'}

html:

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

这将生成 link:

../?prop=xyz

如何使用 routerLink 传递查询参数

How to pass query parameters with a routerLink

angular2-routing

angular