routerLink로 쿼리 매개 변수를 전달하는 방법


161

쿼리 매개 변수를 전달하고 싶습니다 prop=xxx.

이 작동하지 않았다

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

사용하려는 구문은 행렬 매개 변수를위한 것이며이 형식 <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>은 행렬 URL 매개 변수 (? 및 & 구분 기호 대신 세미콜론;를 제공함) 대신 ActivatedRoute.params로 액세스 할 수 있습니다. stackoverflow.com/questions/35688084/… 그리고 여기 stackoverflow.com/questions/2048121/…
William Ardila

1
쿼리 매개 변수와 매트릭스 매개 변수는 동일합니다. 유일한 차이점은 루트 세그먼트에 추가 될 때 쿼리 매개 변수로 직렬화되고 하위 세그먼트에 추가 될 때 매트릭스 매개 변수로 직렬화됩니다.
Günter Zöchbauer

web.archive.org/web/20130126100355/http://brettdargan.com/blog/…에서 더 많은 차이점을 확인하십시오. 또한 angular doc에서 링크 매개 변수 구문을 확인할 수 있습니다. angular.io/docs/ts/latest/ guide /…
William Ardila

답변:


326

queryParams

queryParamsrouterLink그들이 통과 할 수있는 또 다른 입력입니다 .

<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참조하십시오.


프로그래밍 방식으로 어떻게 작동합니까? this.router.navigate ([ '/ resetPassword', {queryParams : {username : loginName}}]); 그러나 결과는이었다 : 로컬 호스트 : 8100 / resetPassword, queryParams = % 5Bobject % 20Object % 5D
rickul

2
답변을 업데이트했습니다. 내가 추가 한 링크도 참조하십시오. 전체 예를 보여줍니다.
Günter Zöchbauer

몇 가지 참고 사항 : rickul의 코드는 엑스트라 앞에 오는 [ '/resetPassword' ], { queryParams: { username: loginName }})곳 이어야합니다 ]. 또한 쿼리 매개 변수는 대소 문자를 구분한다는 것을 잊지 마십시오.
Simon_Weaver 10

2
대상에서 queryParams를 구독하는 것을 잊지 마십시오 : stackoverflow.com/a/39146396/2726844
Vince I

1
또는 경로를 사용 runGuardsAndResolvers: 'always'하는 경우 경로 medium.com/engineering-on-the-incline/…
Adam
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.