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

序章

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

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

前提条件

このチュートリアルを実行するには、次のものが必要です。

• AngleRouterおよびRouterLinkおよびActivatedRouteにある程度精通していると役立つ場合があります。

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

この例では、クエリパラメータ{ 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

これで、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クラスには、現在のURLで使用可能なクエリパラメーターのオブザーバブルを返すqueryParamsプロパティがあります。

次のルート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

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トピックページで演習とプログラミングプロジェクトを確認してください。