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

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

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

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

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

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

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

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

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

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

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

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}