@angular/router モジュールの Router クラスを使ってクエリパラメータを取得する

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

ActivatedRouteを使う

これは最も一般的な方法です。ActivatedRouteサービスは、現在のルート情報へのアクセスを提供します。

1 コンポーネントクラスでクエリパラメータを取得する

コンポーネントクラスで ActivatedRoute を注入し、snapshot または queryParams プロパティを使用してクエリパラメータを取得できます。

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

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

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // クエリパラメータを取得
    const id = this.route.snapshot.queryParams['id'];
    console.log(id); // "123"

    // または
    this.route.queryParams.subscribe(params => {
      const id = params['id'];
      console.log(id); // "123"
    });
  }

}

テンプレートでは、queryParams ディレクティブを使用してクエリパラメータを取得できます。

<h1>{{ id }}</h1>

<p>
  <a [routerLink]="['/detail', id]">詳細</a>
</p>

Locationサービスは、現在のURLへのアクセスを提供します。

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

@Injectable()
export class MyService {

  constructor(private location: Location) {}

  getId() {
    // URLからクエリパラメータを取得
    const params = new URLSearchParams(this.location.search);
    return params.get('id');
  }

}

URLSearchParamsクラスを使用して、URLからクエリパラメータを取得することもできます。

const params = new URLSearchParams(window.location.search);
const id = params.get('id');
console.log(id); // "123"

@angular/router モジュールの Router クラスを使う

Router クラスは、現在のルート情報へのアクセスを提供します。

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class MyService {

  constructor(private router: Router) {}

  getId() {
    // URLからクエリパラメータを取得
    const params = this.router.parseUrl(this.router.url).queryParams;
    return params['id'];
  }

}

Angular 5でURLからクエリパラメータを取得するには、いくつかの方法があります。上記の方法から、自分に合った方法を選択してください。

app.component.html

<h1>{{ id }}</h1>

<p>
  <a [routerLink]="['/detail', id]">詳細</a>
</p>

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

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

  id: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // クエリパラメータを取得
    this.id = this.route.snapshot.queryParams['id'];
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'detail/:id', component: DetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

@Component({
  selector: 'detail-component',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {

  id: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // クエリパラメータを取得
    this.id = this.route.snapshot.params['id'];
  }

}

実行方法

1. 上記のコードをファイルに保存します。
2. ng serve コマンドを実行してアプリケーションを起動します。
3. ブラウザで http://localhost:4200 を開きます。
4. URLに ?id=123 を追加します。
5. アプリケーションがID 123 を表示することを確認します。

このサンプルコードは、Angular 5でURLからクエリパラメータを取得する方法を示しています。

• 上記のコードは、基本的な例です。必要に応じて、コードを変更して、さまざまな方法でクエリパラメータを取得することができます。
• Angular 5でURLからクエリパラメータを取得する方法の詳細については、上記の参考資料を参照してください。

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

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

@Injectable()
export class MyService {

  constructor(private location: Location) {}

  getId() {
    // URLからクエリパラメータを取得
    const params = new URLSearchParams(this.location.search);
    return params.get('id');
  }

}

const params = new URLSearchParams(window.location.search);
const id = params.get('id');
console.log(id); // "123"

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class MyService {

  constructor(private router: Router) {}

  getId() {
    // URLからクエリパラメータを取得
    const params = this.router.parseUrl(this.router.url).queryParams;
    return params['id'];
  }

}

RxJSを使用して、クエリパラメータの変化を監視することもできます。

import { Injectable } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class MyService {

  constructor(private route: ActivatedRoute) {}

  getId(): Observable<string> {
    // クエリパラメータの変化を監視
    return this.route.queryParams.map(params => params['id']);
  }

}

• シンプルな方法でクエリパラメータを取得したい場合は、ActivatedRoute サービスを使用するのがおすすめです。
• URLの変化を監視したい場合は、RxJSを使用するのがおすすめです。