Angular2 でルートパラメータを取得 - ActivatedRoute と ActivatedRouteSnapshot を使いこなす

Angular2 でルートパラメータを取得する方法

Angular2 では、2 つの主要な方法でルートパラメータを取得できます。

ActivatedRoute を使用

ActivatedRoute は、現在のルート情報にアクセスするためのオブジェクトです。ルートパラメータを取得するには、次のコードを使用できます。

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

constructor(private route: ActivatedRoute) {
  this.route.params.subscribe((params: ParamMap) => {
    this.id = +params.get('id'); // 'id' パラメータの値を取得
  });
}

このコードは、params Observable を購読し、パラメータが変更されるたびに subscribe コールバック関数が呼び出されるようにします。paramMap オブジェクトには、すべてのルートパラメータが含まれています。get() メソッドを使用して特定のパラメータの値を取得できます。

ActivatedRouteSnapshot を使用

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

constructor(private route: ActivatedRoute) {
  const id = +this.route.snapshot.paramMap.get('id'); // 'id' パラメータの値を取得
  // ...
}

このコードは、snapshot プロパティを使用して ActivatedRouteSnapshot インスタンスを取得し、paramMap プロパティを使用してパラメータにアクセスします。get() メソッドを使用して特定のパラメータの値を取得できます。

どちらの方法を使用するべきですか？

一般的に、ActivatedRoute を使用することをお勧めします。これは、ルートパラメータが変更されたときに自動的に更新されるため、より反応性の高いコードを作成できます。ただし、パラメータが変更されないことがわかっている場合は、ActivatedRouteSnapshot を使用してパフォーマンスを向上させることができます。

• パラメータの型を指定するには、paramMap.get() メソッドのジェネリック型パラメータを使用できます。
• 必須パラメータの場合は、paramMap.has() メソッドを使用してパラメータが存在することを確認できます。
• 複数のルートパラメータを取得する場合は、paramMap.getAll() メソッドを使用できます。

app.component.html

<div>
  <h1>ユーザ詳細</h1>

  <p>ID: {{ userId }}</p>
  <p>名前: {{ userName }}</p>
</div>

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

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

  userId: number;
  userName: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // ActivatedRoute を使用してパラメータを取得
    this.route.params.subscribe((params: ParamMap) => {
      this.userId = +params.get('id'); // 'id' パラメータの値を取得
      this.userName = params.get('name'); // 'name' パラメータの値を取得
    });

    // ActivatedRouteSnapshot を使用してパラメータを取得
    const id = +this.route.snapshot.paramMap.get('id'); // 'id' パラメータの値を取得
    const name = this.route.snapshot.paramMap.get('name'); // 'name' パラメータの値を取得
    console.log(`ActivatedRouteSnapshot で取得したパラメータ: ID=${id}, 名前=${name}`);
  }
}

app-routing.module.ts

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

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

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

この例では、次のことを行っています。

1. app.component.html テンプレートで、userId と userName プロパティ用のプレースホルダを定義します。
2. app.component.ts コンポーネントで、ActivatedRoute を注入します。
3. ngOnInit メソッドで、次のことを行います。
   • params Observable を購読し、ルートパラメータが変更されたときに subscribe コールバック関数が呼び出されるようにします。
   • paramMap オブジェクトを使用して id と name パラメータの値を取得し、対応するプロパティに割り当てます。
   • ActivatedRouteSnapshot を使用して id と name パラメータの値を取得し、コンソールにログ出力します。

この例を拡張して、次のことを行うことができます。

• さまざまなデータ型のパラメータを処理します。
• 必須パラメータのチェックを行います。
• パラメータを使用して API からデータを取得します。

クエリパラメータを使用する

ルートパラメータとクエリパラメータは似ていますが、異なる用途があります。ルートパラメータは、URL のパス部分で使用され、通常、ルートの識別に使用されます。一方、クエリパラメータは、URL のクエリ部分で使用され、通常、追加情報を提供するために使用されます。

クエリパラメータを使用してパラメータを取得するには、次のコードを使用できます。

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

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe((params: ParamMap) => {
    this.filter = params.get('filter'); // 'filter' クエリパラメータの値を取得
  });
}

カスタムサービスを使用する

カスタムサービスを使用して、ルートパラメータをより組織的に管理することもできます。

まず、ルートパラメータを取得するためのサービスを作成します。

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

@Injectable({
  providedIn: 'root'
})
export class RouteParamService {

  constructor(private route: ActivatedRoute) { }

  getId(): number {
    return +this.route.snapshot.paramMap.get('id'); // 'id' パラメータの値を取得
  }

  getName(): string {
    return this.route.snapshot.paramMap.get('name'); // 'name' パラメータの値を取得
  }
}

次に、コンポーネントでサービスを注入し、パラメータを取得します。

import { Component, OnInit } from '@angular/core';
import { RouteParamService } from './route-param.service';

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

  userId: number;
  userName: string;

  constructor(private routeParamService: RouteParamService) { }

  ngOnInit() {
    this.userId = this.routeParamService.getId();
    this.userName = this.routeParamService.getName();
  }
}

Resolver を使用する

Resolver は、ルートデータを取得するために使用されるクラスです。Resolver を使用して、ルートパラメータをコンポーネントに非同期に提供できます。

まず、ルートパラメータを解決するための Resolver を作成します。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { RouteParamService } from './route-param.service';

@Injectable({
  providedIn: 'root'
})
export class RouteParamResolver implements Resolve<any> {

  constructor(private routeParamService: RouteParamService) { }

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return Observable.create((observer) => {
      observer.next({
        userId: this.routeParamService.getId(),
        userName: this.routeParamService.getName()
      });
      observer.complete();
    });
  }
}

次に、ルート構成で Resolver を指定します。

const routes: Routes = [
  { path: 'user/:id/:name', component: AppComponent, resolve: { user: RouteParamResolver } }
];

最後に、コンポーネントで ActivatedRouteData サービスを使用して Resolver から解決されたデータを注入します。

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

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

  userId: number;
  userName: string;

  constructor(private activatedRouteData: ActivatedRouteData) { }

  ngOnInit() {
    const user = this.activatedRouteData.data.user;
    this.userId = user.userId;
    this.userName = user.