Жизненный цикл и события маршрутизатора

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

Распространённые события маршрутизатора

Маршрутизатор Angular генерирует события навигации, на которые можно подписаться, чтобы отслеживать жизненный цикл навигации. Эти события доступны через observable Router.events. В этом разделе описаны распространённые события жизненного цикла маршрутизации, связанные с навигацией и отслеживанием ошибок (в хронологическом порядке).

Ниже перечислены распространённые события ошибок:

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

Как подписаться на события маршрутизатора

Чтобы выполнять код при определённых событиях жизненного цикла навигации, подпишитесь на router.events и проверьте экземпляр события:

// Example of subscribing to router events
import {Component, inject, signal, effect} from '@angular/core';
import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router';

@Component({
  /*...*/
})
export class RouterEvents {
  private readonly router = inject(Router);

  constructor() {
    // Subscribe to router events and react to events
    this.router.events.pipe(takeUntilDestroyed()).subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // Navigation starting
        console.log('Navigation starting:', event.url);
      }
      if (event instanceof NavigationEnd) {
        // Navigation completed
        console.log('Navigation completed:', event.url);
      }
    });
  }
}

Как отлаживать события маршрутизации

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

Чтобы изучить последовательность событий Router, можно включить ведение журнала внутренних событий навигации для отладки. Для этого передайте параметр конфигурации (withDebugTracing()), который включает подробное ведение журнала всех событий маршрутизации в консоли.

import {provideRouter, withDebugTracing} from '@angular/router';

const appRoutes: Routes = [];
bootstrapApplication(App, {
  providers: [provideRouter(appRoutes, withDebugTracing())],
});

Дополнительные сведения см. в официальной документации о withDebugTracing.

Распространённые сценарии использования

События маршрутизатора позволяют реализовать множество полезных функций в реальных приложениях. Ниже приведены распространённые шаблоны использования событий маршрутизатора.

Индикаторы загрузки

Показывайте индикаторы загрузки во время навигации:

import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    @if (isNavigating()) {
      <div class="loading-bar">Loading...</div>
    }
    <router-outlet />
  `,
})
export class App {
  private router = inject(Router);
  isNavigating = computed(() => !!this.router.currentNavigation());
}

Отслеживание аналитики

Отслеживайте просмотры страниц для аналитики:

import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {inject, DestroyRef, Service} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';

@Service()
export class AnalyticsService {
  private router = inject(Router);
  private destroyRef = inject(DestroyRef);

  startTracking() {
    this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
      // Track page views when URL changes
      if (event instanceof NavigationEnd) {
        // Send page view to analytics
        this.analytics.trackPageView(event.url);
      }
    });
  }

  private analytics = {
    trackPageView: (url: string) => {
      console.log('Page view tracked:', url);
    },
  };
}

Обработка ошибок

Корректно обрабатывайте ошибки навигации и сообщайте о них пользователям:

import {Component, inject, signal} from '@angular/core';
import {
  Router,
  NavigationStart,
  NavigationError,
  NavigationCancel,
  NavigationCancellationCode,
} from '@angular/router';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-error-handler',
  template: `
    @if (errorMessage()) {
      <div class="error-banner">
        {{ errorMessage() }}
        <button (click)="dismissError()">Dismiss</button>
      </div>
    }
  `,
})
export class ErrorHandler {
  private router = inject(Router);
  readonly errorMessage = signal('');

  constructor() {
    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
      if (event instanceof NavigationStart) {
        this.errorMessage.set('');
      } else if (event instanceof NavigationError) {
        console.error('Navigation error:', event.error);
        this.errorMessage.set('Failed to load page. Please try again.');
      } else if (event instanceof NavigationCancel) {
        console.warn('Navigation cancelled:', event.reason);
        if (event.code === NavigationCancellationCode.GuardRejected) {
          this.errorMessage.set('Access denied. Please check your permissions.');
        }
      }
    });
  }

  dismissError() {
    this.errorMessage.set('');
  }
}

Все события маршрутизатора

Для справки ниже приведён полный список всех событий маршрутизатора, доступных в Angular. События сгруппированы по категориям и перечислены в порядке, в котором они обычно возникают во время навигации.

События навигации

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

События активации

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

События завершения навигации

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

Другие события

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

Дальнейшие шаги

Узнайте больше о защитах маршрутов и распространённых задачах маршрутизатора.