ActivatedRouteサービスを使用してURLからパラメータを取得する

Angular 4でURLからパラメータを取得する方法

ActivatedRouteサービスは、現在のルート情報へのアクセスを提供します。このサービスを利用することで、URLパラメータを含むルートパラメータを取得することができます。

例

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.route.params.subscribe(params => {
      this.id = params['id'];
    });
  }
}

上記のコードでは、ActivatedRouteサービスを注入し、paramsプロパティにアクセスしています。paramsプロパティは、URLパラメータを含むObservableオブジェクトです。subscribeメソッドを使用して、このオブジェクトを購読し、パラメータを取得することができます。

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

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

  constructor(private location: Location) {}

  ngOnInit() {
    const url = this.location.path();
    const params = new URLSearchParams(url);
    const id = params.get('id');
  }
}

上記のコードでは、Locationサービスを注入し、pathメソッドを使用して現在のURLを取得しています。その後、URLSearchParamsオブジェクトを使用して、URLパラメータを解析し、パラメータを取得することができます。

• ActivatedRouteサービスは、コンポーネントがルートパラメータにアクセスする必要がある場合に適しています。

• URLパラメータの型チェックを行う場合は、paramsプロパティから取得した値をNumberやString型にキャストする必要があります。
• URLパラメータが存在しない可能性がある場合は、paramsプロパティから取得した値をnullチェックする必要があります。

app.component.html

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

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.route.params.subscribe(params => {
      this.id = params['id'];
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent }
    ])
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

実行方法

1. 上記のコードをapp.component.html、app.component.ts、app.module.tsファイルに保存します。
2. コマンドプロンプトを開き、プロジェクトフォルダーに移動します。
3. 以下のコマンドを実行して、アプリケーションを起動します。

ng serve

1. ブラウザでhttp://localhost:4200を開きます。

説明

上記のサンプルコードでは、ActivatedRouteサービスを使用して、URLからidパラメータを取得しています。

• app.component.htmlファイルでは、{{ id }}というバインディングを使用して、idプロパティの値を表示しています。
• app.component.tsファイルでは、ActivatedRouteサービスを注入し、paramsプロパティにアクセスしています。
• ngOnInitライフサイクルイベント内で、paramsプロパティのsubscribeメソッドを使用して、パラメータを取得しています。
• subscribeメソッドのコールバック関数では、paramsオブジェクトからidパラメータの値を取得し、idプロパティに代入しています。

Angular 4でURLからパラメータを取得するには、ActivatedRouteサービスまたはLocationサービスを使用することができます。どちらの方法を使用するべきかは、状況によって異なります。

Angular 4でURLからパラメータを取得する他の方法

@QueryParam()デコレータを使用して、コンポーネントのクラスプロパティにパラメータをバインドすることができます。

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 {

  @QueryParam('id') id: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
  }
}

上記のコードでは、@QueryParam()デコレータを使用して、idプロパティをidパラメータにバインドしています。

URLSearchParamsオブジェクトを使用して、URLパラメータを解析することができます。

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

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

  constructor(private location: Location) {}

  ngOnInit() {
    const url = this.location.path();
    const params = new URLSearchParams(url);
    const id = params.get('id');
  }
}

上記のコードでは、URLSearchParamsオブジェクトを使用して、idパラメータを取得しています。

window.location.searchプロパティを使用して、URLパラメータを取得することができます。

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

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

  id: number;

  constructor() {}

  ngOnInit() {
    const params = new URLSearchParams(window.location.search);
    this.id = params.get('id');
  }
}

• URLSearchParamsを使用する場合は、URLパラメータを解析する必要がある場合に適しています。

Angular 4でURLからパラメータを取得するには、さまざまな方法があります。どの方法を使用するべきかは、状況によって異なります。