window.location.search プロパティを使用してURLからクエリパラメータを取得する

Angular 2でURLからクエリパラメータを取得する方法

ActivatedRouteサービスは、現在のルート情報へのアクセスを提供します。 このサービスを使用するには、以下の手順が必要です。

1. コンポーネントクラスに ActivatedRoute をインポートします。

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

1. ngOnInit ライフサイクルフックで、route.queryParams プロパティを使用してクエリパラメータを取得します。

ngOnInit() {
  this.route.queryParams.subscribe((params) => {
    // クエリパラメータへのアクセス
    const id = params['id'];
    const name = params['name'];
  });
}

import { Location } from '@angular/common';

constructor(private location: Location) {}

1. location.search プロパティを使用して、URLのクエリ文字列を取得します。

const search = location.search;

// クエリパラメータのパース
const params = new URLSearchParams(search);
const id = params.get('id');
const name = params.get('name');

URLSearchParamsクラスは、URLのクエリ文字列のパースと操作を提供します。 このクラスを使用するには、以下の手順が必要です。

1. URLSearchParams をインポートします。

import { URLSearchParams } from '@angular/common';

1. URLのクエリ文字列を渡して、URLSearchParams の新しいインスタンスを作成します。

const search = location.search;
const params = new URLSearchParams(search);

1. get() メソッドを使用して、個々のクエリパラメータを取得します。

const id = params.get('id');
const name = params.get('name');

Angular 2でURLからクエリパラメータを取得するには、いくつかの方法があります。 最も適切な方法は、アプリケーションの要件によって異なります。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  id: string;
  name: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe((params) => {
      // クエリパラメータへのアクセス
      this.id = params['id'];
      this.name = params['name'];
    });
  }
}

このコードは、ActivatedRoute サービスを使用して、URLから id と name という2つのクエリパラメータを取得しています。

使用方法

1. 上記のコードを app.component.ts ファイルに保存します。
2. 以下のコマンドを実行して、アプリケーションを起動します。

ng serve

上記のコード以外にも、URLからクエリパラメータを取得するには、いくつかの方法があります。 詳細については、以下の参考資料を参照してください。

URLからクエリパラメータを取得するその他の方法

@QueryParam デコレータは、コンポーネントクラスのプロパティにクエリパラメータをマッピングするために使用できます。 このデコレータを使用するには、以下の手順が必要です。

1. コンポーネントクラスに @QueryParam デコレータをインポートします。

import { Component, OnInit, QueryParam } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  @QueryParam('id')
  id: string;

  @QueryParam('name')
  name: string;

  constructor() {}

  ngOnInit() {
    // クエリパラメータは自動的にプロパティにマッピングされます
  }
}

1. コンポーネントクラスの ngOnInit ライフサイクルフックで、クエリパラメータのプロパティにアクセスできます。

URLセグメントは、スラッシュ (/) で区切られたURLの各部分です。 URLセグメントを使用してクエリパラメータを取得するには、以下の手順が必要です。

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

1. route.params プロパティを使用して、URLセグメントを取得します。

ngOnInit() {
  this.route.params.subscribe((params) => {
    // URLセグメントへのアクセス
    const id = params['id'];
    const name = params['name'];
  });
}

window.location.search プロパティは、現在のURLのクエリ文字列を取得するために使用できます。 このプロパティを使用するには、以下の手順が必要です。

1. window.location オブジェクトにアクセスします。

const search = window.location.search;

1. URLSearchParams クラスを使用して、クエリ文字列をパースします。

const params = new URLSearchParams(search);

// クエリパラメータへのアクセス
const id = params.get('id');
const name = params.get('name');