Angularコンポーネント内でのルートパラメータ値の取得

ルートで定義したパラメータの値は、コンポーネントクラス内で取得できます。その方法を見ていきましょう。以下のようなパラメータを持つルートがあるとします:

const routes: Routes = [
	{ path: 'aaaa/:id', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

このパラメータの値をコンポーネントクラス内で取得してみましょう。ここで注意すべき点は、ルートパラメータの値は、そのルートにバインドされたコンポーネント内でのみ取得できるということです。今回の場合、ルートにはAaaaコンポーネントがバインドされています。したがって、これからはこのコンポーネントを扱っていきます。

さて、ルートパラメータの値を取得するには、ActivatedRouteサービスを使用する必要があります。このサービスをコンポーネントにインポートしましょう:

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

コンストラクタにこのサービスを注入します:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		
	}
}

パラメータを持つオブジェクトを取得します:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		console.log(params);
	}
}

パラメータの値を取得します:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		let id = params['id'];
		console.log(id);
	}
}

あなたのパラメータの値を取得してください。