События маршрутизатора и навигация
Реагируйте на события жизненного цикла навигации
«События маршрутизатора и навигация» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Поток событий маршрутизатора
Router.events — это наблюдаемый поток, выдающий события на протяжении жизненного цикла навигации: start, распознавание, проверки защитников, разрешение данных и завершение. Подпишитесь на него, чтобы реагировать на навигацию глобально.
Основные типы событий
Распространённые события: NavigationStart, NavigationEnd, NavigationCancel, NavigationError. Каждое из них является экземпляром класса, который можно отфильтровать.
Отслеживание NavigationEnd
Отфильтруйте поток по определённому типу события с помощью filter и проверки instanceof.
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';
const router = inject(Router);
router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));Глобальный индикатор loading
Показывайте индикатор загрузки между NavigationStart и NavigationEnd/NavigationCancel/NavigationError.
router.events.subscribe(e => {
if (e instanceof NavigationStart) this.loading = true;
if (e instanceof NavigationEnd ||
e instanceof NavigationCancel ||
e instanceof NavigationError) this.loading = false;
});Прокрутка в начало при навигации
Сбрасывайте положение прокрутки после каждой успешной навигации. (Встроенная возможность scrollPositionRestoration также существует.)
router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));Отслеживание страниц для аналитики
NavigationEnd — идеальный момент, чтобы log просмотры страниц в системе аналитики.
router.events.pipe(
filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));Программная навигация
router.navigate принимает массив команд, а router.navigateByUrl — полную строку URL. Оба метода возвращают обещание с результатом, указывающим, успешно ли завершилась навигация.
router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');
const ok = await router.navigate(['/home']);
console.log('success?', ok);Относительная навигация
Используйте relativeTo, чтобы перейти относительно текущего route, например из дочернего компонента.
const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });routerLink и состояние active
В шаблонах routerLink декларативно обрабатывает навигацию, а routerLinkActive добавляет класс CSS к ссылке со статусом active.
<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
routerLinkActive="active">Profile</a>Обработка NavigationError
Выполните subscribe на NavigationError, чтобы обрабатывать неудачные переходы (например, из-за неудачного разрешения данных или отложенной загрузки) и показывать понятное пользователю сообщение.
router.events.pipe(
filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));Фильтрация событий с типами
Angular также предоставляет типизацию RouterEvent; предикат проверки типа в filter позволяет получить в подписчике событие с правильным типом без приведения типа.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете события маршрутизатора.
Повторение: события маршрутизатора и навигация
Router.events предоставляет жизненный цикл навигации.
- Фильтруйте события
NavigationStart/End/Cancel/Error. - Управляйте индикаторами загрузки, сбросом прокрутки и аналитикой.
- Выполняйте навигацию через
navigate/navigateByUrlилиrouterLink.
Вы завершили раздел «Расширенные возможности Angular Router».
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 38
- Уроки
- 144
Часто задаваемые вопросы
Урок «События маршрутизатора и навигация» бесплатный?
Да — полный текст урока «События маршрутизатора и навигация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «События маршрутизатора и навигация»?
Реагируйте на события жизненного цикла навигации Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «События маршрутизатора и навигация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Параметры маршрутов и параметры запросов
- Резолверы и данные маршрута
- Функциональные защитники маршрутов
- События маршрутизатора и навигация