如何在新的Router V 3 alpha(vladivostok)中使用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

要在父路线上设置路线活动类:

[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

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

假设你有组件模型

x = {name:'xyz'}

html:

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

这将生成链接：

../?prop=xyz

Answer 4

你也可以看看这个。

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

>
 link name

 </router-link
>