routerLinkでクエリパラメータを渡す方法


161

クエリパラメータを渡したいのですがprop=xxx

これはうまくいきませんでした

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

使用する構文はマトリックスパラメーター用であり、これはフォームです<a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>。これにより、マトリックスのURLパラメーター(?と&の代わりにセミコロン)が提供されます。これには、ActivatedRoute.paramsでアクティブ化できます。代わりに、activatedRoute.queryParams詳細はこちらstackoverflow.com/questions/35688084/... ここstackoverflow.com/questions/2048121/...
ウィリアムArdila

1
クエリパラメータとマトリックスパラメータは同じです。唯一の違いは、ルートセグメントに追加されるとクエリパラメーターとしてシリアル化され、子セグメントに追加されるとマトリックスパラメーターとしてシリアル化されることです。
ギュンターZöchbauer

このweb.archive.org/web/20130126100355/http://brettdargan.com/blog/…をさらに確認してください。また、角度のドキュメントのリンクパラメータの構文を確認できます。angular.io/ docs / ts / latest /ガイド/…
ウィリアムアルディラ2017年

回答:


325

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}}]);を試してみました しかし、結果は次のとおりです:localhost:8100 / resetPassword; queryParams =%5Bobject%20Object%5D
rickul

2
回答を更新しました。追加したリンクも参照してください。完全な例を示しています。
ギュンターZöchbauer

カップル・ノート:rickulのコードがあるべき[ '/resetPassword' ], { queryParams: { username: loginName }})場所]のエキストラの前に来ます。また、クエリパラメータでは大文字と小文字が区別されることを忘れないでください。
Simon_Weaver

2
ターゲットでqueryParamsをサブスクライブすることを忘れないでください:stackoverflow.com/a/39146396/2726844
Vince I

1
または、ルートを使用している場合runGuardsAndResolvers: 'always'は、ルートを再読み込みします 。medium.com/ engineering
Adam
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.