Angular Routing Events и отладка

Контур

  1. Введение
  2. Подробно о каждом событии угловой маршрутизации
  3. Отладка с навигационными событиями
  4. Вывод

1. Введение

1.1 Когда срабатывают события маршрутизации?

Когда мы перемещаемся по маршрутизатору с помощью routerLink, navigateByUrl () или navigate (), каждый раз Angular Router генерирует события для каждой фазы навигации (от начала навигации до конец навигации).

Это поможет нам выполнить действие на соответствующем этапе маршрутизации.

1.2 Как обнаружить событие?

Чтобы обнаружить серию событий угловой маршрутизации, мы должны подписаться на свойство events для Router

Мы создали отдельный сервис app-route-change.service.ts для обнаружения событий изменения маршрутизации и внедрили его в app-component.ts

В этот сервис мы импортировали Маршрутизатор для подписки на события.



angular -routing-events
Изменить описание stackblitz.com



1.3 Как отфильтровать конкретное событие из серии инициированных событий?

Каждый раз, когда запускается событие, мы будем получать экземпляр этого конкретного инициированного события в подписанной функции.

Если нам нужно выполнять отдельное действие для каждого события, мы можем отфильтровать его с помощью оператора pipe на основе класса instanceof объекта события, полученного в формальном параметре callback-функции абонента.

В следующем примере мы собираемся фильтровать только события RoutesRecognized. Таким образом мы можем фильтровать любое событие и делать то, что требует наша бизнес-логика.

Например. отображение загрузки при запуске навигации, скрытие загрузки при завершении навигации и т. д.

1.4 Список событий угловой маршрутизации

Давайте рассмотрим все события Angular Router:

  1. NavigationStart
  2. RouteConfigLoadStart
  3. RouteConfigLoadEnd
  4. Распознавание маршрутов
  5. GuardsCheckStart
  6. ChildActivationStart
  7. ActivationStart
  8. GuardsCheckEnd
  9. ResolveStart
  10. ResolveEnd
  11. ActivationEnd
  12. ChildActivationEnd
  13. NavigationEnd
  14. Свиток
  15. NavigationCancel
  16. NavigationError

2. Подробное описание каждого события угловой маршрутизации

Теперь мы подробно рассмотрим каждую фазу Angular Router Event на примере.

Мы увидим, когда срабатывает конкретное событие, и какой тип задачи следует выполнять при срабатывании события?

Когда мы перемещаемся по приложению Angular с помощью routerLink, navigateByUrl () или navigate (), запускаются следующие события последовательности:

3. Отладка с навигационными событиями.

Если что-то пойдет не так, например. невозможно перемещаться или навигация / маршрутизатор не работает, тогда мы можем отладить его, включив опцию enableTracing в ExtraOptions RouterModule.

Установив эту опцию, мы можем записывать все события внутренней навигации в консоль. Это поможет нам узнать, где на самом деле произошла ошибка навигации.

Предположим, мы хотим включить отладку для всех маршрутов, определенных в app-route-change.service.ts , а затем просто передать ExtraOptions с параметром enableTracing в значение true, angular регистрирует все события маршрутизатора на консоли каждый раз, когда маршрут изменяется.

Вот как выглядит консоль, как angular регистрирует все события маршрутизатора с подробностями после того, как опция enableTracing становится истинной.

Маршрутизация по допустимому пути (панель управления):

Пробуем выполнить маршрутизацию по неверному пути (фиктивная ссылка):



angular-routing -debugging
Изменить описание stackblitz.com



4. Вывод

Понимая эти события, мы можем получить представление о том, как работает Angular навигация, какое событие запускается, когда и как отлаживать маршрут в случае возникновения какой-либо проблемы.

В соответствии с потребностями нашего приложения мы можем использовать эти события для интеграции таких функций, как загрузка показа во время навигации, аутентификация перед загрузкой конфигурации модулей отложенной загрузки и т. Д.

Что дальше?

Мы будем использовать эти события маршрутизации Angular в нашем гибридном приложении, которое я собираюсь опубликовать в моем следующем блоге '' Как разработать гибридное приложение с навигацией на основе состояния (ui-router) в AngularJS и на основе URL (Router ) навигация в Angular? ''

Предложения всегда приветствуются!
Не стесняйтесь комментировать любые предложения / исправления или писать мне на почту [email protected]

Следуй за мной на

Twitter, Instagram, Gituhub, Stackoverflow, Reddit, Stackblitz, Dribble, Quara, Unslash, Pininterest, Wordpress