События изменения маршрутизации маршрутизации маршрутизатора серии Angular 18 (21)

Маленькая мразь · Опубликовано 05.08.2024 14:11:09

Требования: Обнаружить изменения в маршрутах Angular Route, переключить меню на панели навигации и динамически изменить название веб-страницы, вставляя Title при загрузке маршрута.

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

Вход виден.

Такие RouterEvents служат базовым классом (в алфавитном порядке) для следующих событий, связанных с маршрутизатором:

GuardsCheckEnd
GuardsCheckStart
Навигация Отмена
Навигация Конец
Ошибка навигации
Навигация Пропущено
Навигация Старт
ResolveEnd
ResolveStart
МаршрутыПризнанные

Ссылка:Вход по гиперссылке виден.

Приведённый выше список категорий — это потенциальный результат, который ваш роутер может излучать. Например, если пользователь начинает переходить к новому виду, будут вызваны события NavigationStart и NavigationEnd.

Чтобы получить эту информацию (и многое другое), мы можем подписаться на событие router.events со следующим кодом:

Вход виден.

Фильтруйте события по условию if, код выглядит следующим образом:

Вход виден.

Если вам нужен только одно событие, например NavigationEnd, мы можем фильтровать и передавать наблюдаемое из RxJS так, чтобы оно испускалось только на конкретных событиях:

Вход виден.

Измените код заголовка страницы:

Вход виден.

Когда вы кликаете в меню для переключения маршрутов, рендеринг выглядит следующим образом:

(Конец)

[Угловат] События изменения маршрутизации маршрутизации маршрутизатора серии Angular 18 (21)

Связанные публикации

Просмотренные разделы