Определение активного маршрута в Angular: решение с Bootstrap 4

Быстрый ответ

Чтобы определить активный маршрут в Angular, у вас должен быть внедрён сервис ActivatedRoute. Используйте свойство .snapshot для того, чтобы быстро получить доступ к URL и его параметрам:

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

// Это лучше делать не в конструкторе, а в методе.
const activeUrl = this.route.snapshot.url.join('');
const routeParams = this.route.snapshot.params;

console.log('Активный URL или "хлебные крошки" приложения:', activeUrl);
console.log('Параметры маршрута или "секретные ингредиенты":', routeParams);

Свойство .snapshot предоставляет снимок маршрута, позволяя извлечь данные синхронно, без необходимости подписываться на Observables.

Отслеживание изменений маршрутов гибко и оперативно

Для динамического отслеживания изменений используйте подписку на свойства маршрута:

// Это пример того, как отслеживать обновление маршрута.
this.route.url.subscribe(url => console.log('URL изменён:', url.join('')));
this.route.params.subscribe(params => console.log('Параметры изменены:', params));

Теперь ваше приложение будет обновляться в реальном времени и оперативно реагировать на изменения маршрутов.

Продвигаем вёрстку на новый уровень

Чтобы выделить активный маршрут, используйте директиву [routerLinkActive]:

<a routerLink="/home" routerLinkActive="active-link">Главная</a>

Эта директива определяет добавление класса к ссылке при совпадении с текущим маршрутом, что облегчает стилизацию, особенно в приложениях, использующих Bootstrap 4.

Для продвинутых пользователей

Для обработки комплексных маршрутных структур в Angular существует сервис Router:

if (this.router.isActive('/certain-route', exactMatch: boolean)) {
  // Это условие позволяет вам применить определённую логику в случае, если маршрут активен.
}

Метод isActive проверяет активность маршрута с учётом точного или частичного соответствия.

Не только URL

Вне зависимости от URL можно использовать сервис Location для динамической проверки:

import { Location } from '@angular/common';

constructor(private location: Location) {}

const currentPath = this.location.path();
console.log('Текущий путь:', currentPath);

С использованием this.location.path() можно применить регулярные выражения для сравнения путей.

Визуализация

Представьте себе, что вы находитесь в лабиринте и используете Angular для ориентирования:

Вы стоите на перекрестке (🌟), перед вами установлены указатели (🪧), а точка вашего текущего расположения — это активный маршрут (📍).

Чтобы определить своё положение (📍), Angular предлагает вам наглядную карту (Router):

// Router действует как навигатор:
const activeRoute = router.url; // 📍

Router в Angular — это ваш навигатор по маршрутам приложения.

Навигация с помощью ROUTER_DIRECTIVES

Для облегчения навигации обычно используются директивы ROUTER_DIRECTIVES:

<a [routerLink]="['/user', userId]" routerLinkActive="active">Профиль пользователя</a>

routerLink и routerLinkActive ассистируют вам в управлении навигацией и активностью маршрутов, упрощая код.

Интеграция сторонних библиотек

Обеспечьте стилистическую консистенцию, настраивая класс router-link-active в CSS в соответствии со стилями Bootstrap 4.

Инновации в роутере Angular

Новые версии роутера Angular предлагают эффективное управление и поддержку сложных маршрутных сценариев.

Обращение к сообществу при испытании проблем

Если у вас всё ещё остались вопросы после чтения документации, обратитесь к сообществам, например, к Stack Overflow. Совместное решение проблем всегда проще.

Полезные материалы

1. Angular — Руководство по роутеру Angular.
2. Angular — Информация о ActivatedRoute.
3. Как отследить смену маршрута в Angular? – Stack Overflow — Советы от сообщества.
4. Angular Router: Дочерние маршруты, вспомогательные маршруты, главные и детальные — О вариативности роутера Angular.
5. Angular Lifecycle Hooks — О хуках жизненного цикла в Angular.
6. Angular University — Уроки по навигационным событиям роутера Angular.
7. Medium — Работа с состоянием роутера в защитниках Angular.