Тестовое задание на 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.

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