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

Получите значения ваших параметров.