Тестовое задание на Angular. Навигация в приложении.
В данной статье реализуем обертку над стандартным Angular Router, чтобы унифицировать все пути в приложении.
Создадим enum
, в котором опишем все пути в приложении:
И также добавим interface NavigationLink
, который определит параметры ссылок.
Реализуем сам сервис, который берет url
, подставляет в него параметры:
Ключевой метод getRoute
:
getRoute(navigationPath: NavigationPath, params: Record<string, any> = {}): (string | number)[] {
const segments = navigationPath.split('/').filter((value) => value?.length);
const routeWithParams: (string | number)[] = ['/'];
for (const segment of segments) {
if (segment.charAt(0) === ':') {
const paramName = segment.slice(1);
if (params && params[paramName]) {
routeWithParams.push(params[paramName]);
} else {
routeWithParams.push(paramName);
}
} else {
routeWithParams.push(segment);
}
}
return routeWithParams;
}
Берем один из доступных путей (NavigationPath
), разбиваем его по “/”, перебираем каждый сегмент и пытаемся найти соответствующий параметр.
Пример использования:
this.navigationService.navigateByUrl(
NavigationPath.RoomPage, { id: room.id }
);
Для того чтобы использовать сервис в шаблонах, добавим pipe:
Пример использования:
<a [routerLink]="link.route | navPath">
{{ link.label }}
</a>
Ссылки
Вернуться к оглавлению — Введение.
Следующая статья — Создание admin лейаута.
Предыдущая статья — Работа с формами.
Все исходники на github/fafnur/barinb.
Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur