Значения параметров маршрутов в компоненте в 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);
  }
}