Angularでルートパラメタを取得する

Angularでルートパラメタを取得するには、ActivatedRoute.snapshot.paramMap.get() を使います。

コンポーネントでルートパラメタを取得するには、

  • ActivatedRouteをインポートし、
  • コンポーネントのコンストラクタでActivatedRouteを使う事を宣言し、
  • ActivatedRoute.snapshot.paramMap.get() を呼び出します。

コンポーネントで使う例は以下のような感じ。

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

// ルートパラメタを使うための準備
import { ActivatedRoute } from '@angular/router'

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

  constructor(
    // ルートパラメタを使うための準備
    private route: ActivatedRoute
  ) { }

  getHoge(): void {
    // ルートパラメタのidを取り出す。
    const id = +this.route.snapshot.paramMap.get('id');
    // 何かの処理
  }

  ngOnInit() {
  }

}

余談ですが、

const id = +this.route.snapshot.paramMap.get(‘id’);

のように+ をつけることで、数値型にキャストできるようです。

以上です。

タイトルとURLをコピーしました