routerLink를 사용하여 쿼리 매개 변수를 전달하는 방법

routerLink를 사용하여 쿼리 매개 변수를 전달하는 방법

쿼리 매개 변수를 전달합니다.prop=xxx.

이것은 효과가 없었습니다.

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

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

동적 쿼리 문자열 매개 변수를 전달하려는 사용자에게는 다음과 같은 이점이 있습니다.

성분 모형이 있다고 가정합니다.

x = {name:'xyz'}

html:

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

링크가 생성됩니다.

../?prop=xyz

이것도 확인하실 수 있습니다.

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

>
 link name

 </router-link
>

언급URL : https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink