# Использование параметров маршрутов в компоненте в Angular

Давайте теперь посмотрим, как мы можем использовать параметры роутов внутри класса компонента.

Пусть у нас есть следующий маршрут с параметрами:

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

Пусть у нас есть ссылки для перехода на данный компонент с различными параметрами:

`<nav> <a routerLink="/aaaa/1" routerLinkActive="active" > 1 </a> <a routerLink="/aaaa/2" routerLinkActive="active" > 2 </a> <a routerLink="/aaaa/3" routerLinkActive="active" > 3 </a> </nav>`

Пусть в дочернем компоненте содержится следующий массив:

`let arr: string = [ 'a', 'b', 'c', 'd', 'e' ]; export class AaaaComponent { }`

Давайте в завимости от значения параметра роута будем получать сооветствующий элемент массива:

`export class AaaaComponent { constructor(private activateRoute: ActivatedRoute) { let params = activateRoute.snapshot.params; let id = params['id']; this.value = arr[id]; } }`

Выведем полученный элемент в представлении:

`значение: {{ value }}`

Пусть в дочернем компоненте хранится следующий массив объектов:

`[ { name: 'user1', surn: 'surn1', }, { name: 'user2', surn: 'surn2', }, { name: 'user3', surn: 'surn3', }, ]`

Сделайте маршрут с параметром. Пусть в зависимости от значения параметра в представление выводятся данные одно из юзеров.

← →
↑