Table of Contents
はじめに
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<^>
注: クエリパラメータの保持は、以前は preserveQueryParams を true に設定して行われていましたが、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>
これで、RouterLink で queryParams および 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 オブジェクトが表示されます。
[secondary_label Output]
{ order: "popular" }
params.order の値は次のとおりです。
[secondary_label Output]
popular
また、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.navigate と RouterLink を使用して、queryParams と queryParamsHandling を紹介しました。ActivatedRoute を使用した queryParams と queryParamMapについても説明しました。
Angular の詳細については、Angular トピックページで演習とプログラミングプロジェクトをご覧ください。
