Создайте простой сервис, который предоставляет информацию о предыдущем маршруте внутри вашего приложения Angular.
В Angular есть мощный и универсальный Маршрутизатор. Недавно мне потребовалось обеспечить, чтобы мои компоненты могли получить доступ к информации о предыдущем маршруте, который пользователь посетил внутри моего приложения. К моему удивлению, на сегодняшний день Router не поддерживает такую функциональность из коробки. Но он по-прежнему предоставляет необходимые средства для быстрого создания этой функциональности.
Сфера
В моем случае использования предполагалось, что мне нужно было получить доступ только к предыдущему маршруту внутри моего ngOnInit() жизненного цикла различных компонентов и что мне не требовалось сохранять информацию постоянным при перезагрузке страницы. Поэтому я решил:
- Создайте простую корневую службу с именем
PreviousRouteService - Используйте события маршрутизатора для отслеживания и захвата информации о предыдущем и текущем маршруте
Услуга
Во-первых, я создал простую службу Angular с областью действия на корневом уровне моего приложения. Затем я импортировал маршрутизатор и добавил свойства и метод getter для previousUrl. Затем я подписался на все события Router, чтобы увидеть, что происходит во время изменения маршрута:
Маршрутизатор запускает события нескольких типов во время изменения маршрута, и вы можете выбрать событие, которое соответствует вашим требованиям. В моем случае я решил использовать NavigationEnd, поскольку мое приложение использует _6 _ / _ 7_ охранников, и я хотел подсчитывать только успешные изменения маршрута, которые привели к тому, что пользователь фактически перешел на такую страницу:
Дальнейшее его улучшение
Вышеупомянутое обычно работает, но проблема в том, что при использовании NavigationEnd мы сталкиваемся с состоянием гонки: пользователь страницы перенаправляется на вызовы нашей службы внутри функции конструктора или ловушки ngOnInit во время цикла навигации все еще продолжается, и событие NavigationEnd еще не запущено.
Таким образом, выбор здесь - либо использовать другой RouterEvent (например, ResolveEnd), который надежно завершается до вызова getPreviousUrl, либо использовать подписку (например, BehaviorSubject) вместо простого получателя:
Теперь с подпиской мы можем использовать наш сервис внутри компонентов нашего приложения таким образом, не забывая отписаться от нашей подписки с помощью ловушки уничтожения компонентов:
Теперь решение работает надежно, и я могу реализовать дополнительные функции, требующие знания ранее посещенного пользователем маршрута.
Заключение
Надеюсь, вам понравилось это короткое чтение, и желаю всем приятного кодирования.
