Перейти к содержанию

События маршрутизации

Каждый раз, когда в Angular приложении осуществляется навигация, Router сервис инициирует ряд событий:

  • NavigationStart — начало навигации;
  • RoutesRecognized — завершение процесса парсинга URL и распознавания маршрутов;
  • RouteConfigLoadStart — инициируется непосредственно перед асинхронной загрузкой маршрутов;
  • RouteConfigLoadEnd — инициируется непосредственно после асинхронной загрузкой маршрутов;
  • NavigationEnd — завершение навигации;
  • NavigationCancel — навигация отклонена, возникает, когда guard возвращает false;
  • NavigationError — возникновение непредвиденной ошибки в процессе осуществления навигации.

Перечисленные выше события могут быть обработаны в любом компоненте или сервисе приложения. Чтобы определить для них обработчики, необходимо "подписаться" на свойство events сервиса Router.

Определим обработчики в контроллере HomePageComponent:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@Component({
    selector: 'home-page',
    templateUrl: './home-page.component.html',
})
export class HomePageComponent {
    constructor(private router: Router) {
        this.router.events.subscribe((event) => {
            if (event instanceof NavigationStart) {
                console.log('Navigation Start');
            }

            if (event instanceof NavigationEnd) {
                console.log('Navigation End');
            }
        });
    }
}

Обратите внимание, что классы событий должны быть импортированы из библиотеки @angular/router.

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

Ссылки

Комментарии