Angularでクエリパラメータを使用する方法

はじめに

Angular でクエリパラメータを使用すると、アプリケーション内の任意のルートにオプションのパラメータを渡すことができます。クエリパラメータは通常のルートパラメータとは異なり、1つのルートでのみ使用でき、オプションではありません(例: /product/:id)。

この記事では、製品のリストを表示するアプリケーションの例を参照します。受信コンポーネントが読み取り、処理できるオプションのorderおよびprice-rangeの値を提供します。提供された値は、製品リストの順序付けとフィルタリングに影響します。

Router.navigate でクエリパラメータを使用する

Router.navigateを使用してルートに移動する必要がある場合は、queryParams でクエリパラメータを渡します。

この例では、人気順にリストされた製品に訪問者を割り当てる場合、次のようになります。

goProducts() {   this.router.navigate(['/products'], { queryParams: { order: 'popular' } }); } 

これにより、URLは以下のようになります。

http://localhost:4200/products?order=popular 

複数のクエリパラメータを指定することもできます。この例では、人気順にリストされた製品に訪問者を割当し、高価な価格帯でフィルタリングする場合は、次のようになります。

goProducts() {   this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } }); } 

これにより、URLは以下のようになります。

http://localhost:4200/products?order=popular&price-range=not-cheap 

これで、queryParams を使用してクエリパラメータを設定する方法を理解することができました。

queryParamsHandling を使用したクエリパラメータの保持またはマージ

デフォルトでは、クエリパラメータは後続のナビゲーション操作で失われます。これを防ぐために、queryParamsHandling'preserve'または'merge'のいずれかに設定します。

この例では、クエリパラメータを保持したまま、クエリパラメータ { order: 'popular' }を含むページから/users ページに訪問者を割り当てる場合は、'preserve'を使用します。

goUsers() {   this.router.navigate(['/users'], { queryParamsHandling: 'preserve' }); } 

これにより、URLは以下のようになります。

http://localhost:4200/users?order=popular 

この例では、クエリパラメータ { order: 'popular' }を含むページから、/users ページに訪問者を割り当て、クエリパラメータ { filter: 'new' } を渡す場合は、'merge'を使用します。

goUsers() {   this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' }); } 

これにより、URLは以下のようになります。

http://localhost:4200/users?order=popular&filter=new 

注: クエリパラメータの保持は、以前は preserveQueryParamstrue に設定して行われていましたが、Angular 4+ では廃止されi queryParamsHandling を使用して行われるようになりました。

これで、queryParamsHandling を使用してクエリパラメータを保持およびマージする方法を理解することができました。

RouterLink でクエリパラメータを使用する

この例では、代わりにRouterLink ディレクティブを使用してルートに移動する場合は、次のようにqueryParamsを使用します。

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">   Products </a> 

この例では、後続のナビゲーションでクエリパラメータを 'preserve' または 'merge'する場合、次のように queryParamsHandling を使用します。

<a [routerLink]="['/users']"    [queryParams]="{ filter: 'new' }"    queryParamsHandling="merge">   Users </a> 

これで、RouterLinkqueryParams および queryParamsHandling の使用方法を理解することができました。

クエリパラメータ値へのアクセス

オプションのクエリパラメータをルートに渡す方法を学習したので、作成されたルートでこれらの値にアクセスする方法を見てみましょう。ActivatedRoute クラスには、queryParams プロパティがあり、現在の URL で使用可能なクエリパラメータのオブザーバブルな値を返します。

次のルートURL を指定します。

http://localhost:4200/products?order=popular 

以下のように、order クエリパラメータにアクセスできます。

// ... import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter';  @Component({ ... }) export class ProductComponent 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;         console.log(this.order); // popular       }     );   } } 

コンソールログでは、次のように params オブジェクトが表示されます。

Output{ order: "popular" } 

params.order の値は次のとおりです。

Outputpopular 

また、queryParamMap もあり、これは paramMap オブジェクトを使用してオブザーバブルな値を返します。

次のルートURL を指定します。

http://localhost:4200/products?order=popular&filter=new 

次のように、クエリパラメータにアクセスできます。

this.route.queryParamMap   .subscribe((params) => {     this.orderObj = { ...params.keys, ...params };   } ); 

ここではオブジェクトスプレッド演算子を使用して、これはorderObj のデータの結果の状態を示します。

{   "0": "order",   "1": "filter",   "params": {     "order": "popular",     "filter": "new"   } } 

これで、queryParams および queryParamMap を使用して作成されたルートの値にアクセスする方法を理解することができました。

まとめ

この記事では、さまざまな例を使用して、Angular でクエリパラメータを設定および取得しました。Router.navigateRouterLink を使用して、queryParamsqueryParamsHandling を紹介しました。ActivatedRoute を使用した queryParamsqueryParamMapについても説明しました。

Angular の詳細については、Angular トピックページで演習とプログラミングプロジェクトをご覧ください。