はじめに
アプリケーションを構築する際、ルートの動作を記述するためにいくつかの引数やパラメータを渡したいシナリオがあるかもしれません。 Angularでは、これらはクエリパラメータと呼ばれ、これらはオプションです。クエリパラメータは、通常のルートパラメータ（必須パラメータであり、1つのルートにのみバインドされるもの）と混同しないようにしてください。
ルートパラメータとクエリパラメータの違いを明確にするために、商品を保存するアプリケーションを構築していると想像してください。次を使用して特定の製品を開くルートを作成できます。 product_id。また、次のようにクエリパラメータを指定することもできます。 read_only。 read_onlyが trueに設定されている場合、ユーザーはレコードの表示のみが可能ですが、 read_onlyが falseの場合、ユーザーはレコードの編集も行うことができます。このように、1つのルートだけで編集と表示の両方のユースケースを処理できます。ここで、 product_idはルートパラメータであり、オプションである read_onlyはクエリ パラメータです。.
前提条件
この記事を完全に理解するには、Angularを使用したアプリケーション構築に慣れている必要があります。Angular Router、RouterLink、およびActivatedRouteの経験もあると役立ちます。
Router.navigateを使用したクエリパラメータの受け渡し
ルート間を遷移するために Router.navigateを使用している場合は、 queryParamsを使用してクエリパラメータを送信します。
上記の例で、訪問者に人気順でソートされた商品リストを表示させたい場合は、以下のコードを使用します。
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
このコードを使用すると、URLは次のようになります。
|
1 |
http://localhost:4200/products?order=popular |
ただし、遷移時に複数のパラメータを渡す必要があるシナリオも存在します。たとえば、商品を人気順かつ価格順でソートしたい場合は、以下のコードを使用できます。
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
今回は、URLは次のようになります。
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
以上が、次のものを使用したクエリパラメータの設定方法のまとめです： queryParams.
queryParamsHandlingを使用したクエリパラメータの消失防止
ルート間を遷移するとき、パラメータは失われがちです。たとえば、引数 arg0を渡した場合、その後のルーティングが発生したときには渡されません。 queryParamsHandlingを使用し、値を preserveまたは merge.
に設定することで、パラメータを保存できます。上記の例で、ルートパラメータを保持したまま、訪問者をbrandsページへ、productページから、ルートパラメータ { order: 'popular' }を保持したまま遷移させたいとします。これを行うには、 queryParamsHandlingを使用し、それを preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
これにより、URLは次のようになります。
|
1 |
http://localhost:4200/users?brand=popular |
次に、前のルートのクエリパラメータ { order: 'popular' }を保持しつつ、新しいパラメータ { price: 'high-to-low' }を追加したいとします。その場合は、 queryParamsHandlingを merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
上記のコードを使用すると、URLは次のようになります。
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
以上で、 queryParamsHandling を使用した、保持またはマージによるクエリパラメータの保存に関する説明を終わります。
RouterLinkを使用したクエリパラメータの渡し方
前述のリンクを考慮して、ナビゲーションに RouterLink ディレクティブを使用したい場合は、以下のように queryParams を使用してクエリパラメータを渡す必要があります。
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Products </a> |
ワンウェイバインディングを使用して、オブジェクトを queryParams に渡していることに注目してください。オブジェクト全体を queryParams .
さらに、これらのクエリパラメータを後続のナビゲーションに引き継ぎたい場合は、 queryParamsHandling オプションを使用できます。queryParamsHandling で指定可能なオプションは、 merge および preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Products</a> |
ここでは、 queryParams の渡し方と、 queryParamsHandling によるパラメータの処理方法を、 RouterLink.
クエリパラメータの値の読み取り
これまでに、ルートでクエリパラメータを渡す方法を学びました。これらのパラメータはオプションであり、遷移先のページに情報を伝えるために使用されました。パラメータを送信することは一部にすぎず、URLからパラメータを読み取って使用することも必要です。
Angularでは、 ActivatedRoute クラスを使用してルートのクエリパラメータを読み取ります。 ActivatedRoute には、 queryParams という、現在のURLのパラメータを明らかにするObservableプロパティがあります。
次のURLを扱っていると仮定します。
|
1 |
http://localhost:4200/products?order=popular |
コード内でクエリパラメータ order にアクセスするには、以下のコードを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent implements OnInit { order: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => { console.log(params); // { order: "popular" } this.order = params.order; }); } } |
コンソールには、クエリパラメータ order の値である “popular” が出力されます。複数のクエリパラメータがある場合は、 queryParamMap プロパティを使用できます。これは observable paramsMap オブジェクトを返します。
以下のように、複数のクエリパラメータを持つURLがある場合：
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
以下のコードを使用して、これらのクエリパラメータにアクセスできます：
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
ここで オブジェクトのスプレッド演算子 を使用すると、以下の結果が得られます：
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
これで、結果のルートからクエリパラメータにアクセスする方法を理解できたはずです。
結論
このチュートリアルでは、クエリパラメータとルートパラメータの違いについて説明しました。また、ルート間で引数をクエリパラメータとして渡し、さらに queryParams や queryParamsHandling を Router.navigate や RouterLink とともに使用してページ上でそれらを取得する方法についても説明しました。また、 queryParams や queryParamMap を ActivatedRoute で処理する方法についても学びました。.
AngularのベースにはJavaScriptが必要です。JavaScriptについての知識をさらに深めたい場合は、以下のブログをチェックしてください。
ハッピーコンピューティング！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。