Использование параметров маршрутов в компоненте в 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', }, ]

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