One place for hosting & domains

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


      はじめに

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

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

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

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

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

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

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

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

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

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/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]="["https://www.digitalocean.com/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 トピックページで演習とプログラミングプロジェクトをご覧ください。



      Source link