Події зміни маршрутизації маршрутизатора серії Angular 18 (21)

Маленька покидька · Опубліковано 05.08.2024 14:11:09

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

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

Вхід видно.

Такі RouterEvents слугують базовим класом (в алфавітному порядку) для цих подій, пов'язаних із маршрутизатором:

GuardsCheckEnd
GuardsCheckStart
Навігація Скасування
Навігація Кінець
НавігаціяПомилка
НавігаціяПропущено
Навігація Start
ResolveEnd
ResolveStart
МаршрутиВизнані

Посилання:Вхід за гіперпосиланням видно.

Наведений вище список категорій — це потенційний результат, який ваш роутер може випромінювати. Наприклад, якщо користувач починає навігувати до нового вигляду, будуть викликані події NavigationStart і NavigationEnd.

Щоб отримати цю інформацію (та більше), ми можемо підписатися на подію router.events з таким кодом:

Вхід видно.

Відфільтруйте події за умовою if, код виглядає так:

Вхід видно.

Якщо вам потрібна лише одна подія, наприклад NavigationEnd, ми можемо відфільтрувати і перенести спостережуваний з RxJS так, щоб він випромінювався лише на конкретних подіях:

Вхід видно.

Змініть код заголовка сторінки:

Вхід видно.

Коли ви натискаєте меню для перемикання маршрутів, рендеринг виглядає так:

(Кінець)

[Кутовий голос] Події зміни маршрутизації маршрутизатора серії Angular 18 (21)

Пов'язані дописи

Переглянуті розділи