// Tutorial //

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

Published on December 15, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
日本語
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 ディレクティブを使用してルートに移動する場合は、次のように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 の値は次のとおりです。

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.navigateRouterLink を使用して、queryParamsqueryParamsHandling を紹介しました。ActivatedRoute を使用した queryParamsqueryParamMapについても説明しました。

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


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!