序章
Angularのクエリパラメータを使用すると、アプリケーション内の任意のルートにオプションのパラメータを渡すことができます。 クエリパラメータは通常のルートパラメータとは異なります。通常のルートパラメータは1つのルートでのみ使用可能であり、オプションではありません(/product/:id
など)。
この記事では、製品のリストを表示するアプリケーションの例を参照します。 受信コンポーネントが読み取って操作できるオプションのorder
およびprice-range
値を提供します。 提供される値は、製品リストの順序付けとフィルタリングに影響します。
前提条件
このチュートリアルを実行するには、次のものが必要です。
- AngleRouterおよびRouterLinkおよび
ActivatedRoute
にある程度精通していると役立つ場合があります。
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
この例では、クエリパラメータ{ filter: 'new' }
を渡しながら、クエリパラメータ{ order: 'popular' }
のページから/users
ページに訪問者をルーティングする場合は、'merge'
:
goUsers() { this.router.navigate( ['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' } ); }
これにより、次のようなURLになります。
http://localhost:4200/users?order=popular&filter=new
注:クエリパラメーターの保持は、preserveQueryParams
をtrue
に設定して実現されていましたが、Angular 4+では廃止され、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>
これで、queryParams
およびqueryParamsHandling
をRouterLink
で使用する方法を理解できました。
クエリパラメータ値へのアクセス
オプションのクエリパラメータをルートに渡す方法がわかったので、結果のルートでこれらの値にアクセスする方法を見てみましょう。 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
paramMap
オブジェクトでオブザーバブルを返すqueryParamMap
もあります。
次のルート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でクエリパラメーターを設定および取得しました。 queryParams
とqueryParamsHandling
をRouter.navigate
とRouterLink
で紹介されました。 queryParams
とqueryParamMap
とActivatedRoute
も紹介されました。
Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。