Ciclo de Vida do Router e Eventos

O Router Angular fornece um conjunto abrangente de hooks de ciclo de vida e eventos que permitem que você responda a mudanças de navegação e execute lógica customizada durante o processo de roteamento.

Eventos comuns do router

O Router Angular emite eventos de navegação que você pode fazer subscription para rastrear o ciclo de vida da navegação. Estes eventos estão disponíveis através do observable Router.events. Esta seção cobre eventos comuns de ciclo de vida de roteamento para navegação e rastreamento de erros (em ordem cronológica).

Os seguintes são eventos de erro comuns:

Para uma lista de todos os eventos de ciclo de vida, confira a tabela completa deste guia.

Como fazer subscription em eventos do router

Quando você deseja executar código durante eventos específicos do ciclo de vida de navegação, você pode fazer isso fazendo subscription em router.events e verificando a instância do evento:

// Exemplo de fazer subscription em eventos do routerimport { Component, inject, signal, effect } from '@angular/core';import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router';@Component({ ... })export class RouterEventsComponent {  private readonly router = inject(Router);  constructor() {    // Fazer subscription em eventos do router e reagir a eventos    this.router.events.pipe(takeUntilDestroyed()).subscribe((event: Event) => {      if (event instanceof NavigationStart) {        // Navegação iniciando        console.log('Navigation starting:', event.url);      }      if (event instanceof NavigationEnd) {        // Navegação concluída        console.log('Navigation completed:', event.url);      }    });  }}

Nota: O tipo Event de @angular/router tem o mesmo nome que o tipo global regular Event, mas é diferente do tipo RouterEvent.

Como debugar eventos de roteamento

Debugar problemas de navegação do router pode ser desafiador sem visibilidade na sequência de eventos. O Angular fornece um recurso de debugging integrado que registra todos os eventos do router no console, ajudando você a entender o fluxo de navegação e identificar onde os problemas ocorrem.

Quando você precisa inspecionar uma sequência de eventos do Router, você pode habilitar logging para eventos internos de navegação para debugging. Você pode configurar isso passando uma opção de configuração (withDebugTracing()) que habilita logging detalhado no console de todos os eventos de roteamento.

import { provideRouter, withDebugTracing } from '@angular/router';const appRoutes: Routes = [];bootstrapApplication(AppComponent,  {    providers: [      provideRouter(appRoutes, withDebugTracing())    ]  });

Para mais informações, confira a documentação oficial sobre withDebugTracing.

Casos de uso comuns

Eventos do router habilitam muitos recursos práticos em aplicações do mundo real. Aqui estão alguns padrões comuns que são usados com eventos do router.

Indicadores de carregamento

Mostrar indicadores de carregamento durante a navegação:

import { Component, inject } from '@angular/core';import { Router } from '@angular/router';import { toSignal } from '@angular/core/rxjs-interop';import { map } from 'rxjs/operators';@Component({  selector: 'app-loading',  template: `    @if (loading()) {      <div class="loading-spinner">Loading...</div>    }  `})export class AppComponent {  private router = inject(Router);  readonly loading = toSignal(    this.router.events.pipe(      map(() => !!this.router.getCurrentNavigation())    ),    { initialValue: false }  );}

Rastreamento de analytics

Rastrear visualizações de página para analytics:

import { Component, inject, signal, effect } from '@angular/core';import { Router, NavigationEnd } from '@angular/router';@Injectable({ providedIn: 'root' })export class AnalyticsService {  private router = inject(Router);  private destroyRef = inject(DestroyRef);  startTracking() {    this.router.events.pipe(takeUntilDestroyed(this.destroyRef))      .subscribe(event => {        // Rastrear visualizações de página quando a URL muda        if (event instanceof NavigationEnd) {           // Enviar visualização de página para analytics          this.analytics.trackPageView(url);        }      });  }  private analytics = {    trackPageView: (url: string) => {      console.log('Page view tracked:', url);    }  };}

Tratamento de erros

Lidar com erros de navegação graciosamente e fornecer feedback ao usuário:

import { Component, inject, signal } from '@angular/core';import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router';@Component({  selector: 'app-error-handler',  template: `    @if (errorMessage()) {      <div class="error-banner">        {{ errorMessage() }}        <button (click)="dismissError()">Dismiss</button>      </div>    }  `})export class ErrorHandlerComponent {  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.reason === NavigationCancellationCode.GuardRejected) {          this.errorMessage.set('Access denied. Please check your permissions.');        }      }    });  }  dismissError() {    this.errorMessage.set('');  }}

Todos os eventos do router

Para referência, aqui está a lista completa de todos os eventos do router disponíveis no Angular. Estes eventos são organizados por categoria e listados na ordem em que tipicamente ocorrem durante a navegação.

Eventos de navegação

Estes eventos rastreiam o processo de navegação principal desde o início através do reconhecimento de route, verificações de guard e resolução de dados. Eles fornecem visibilidade em cada fase do ciclo de vida de navegação.

Eventos de ativação

Estes eventos ocorrem durante a fase de ativação quando components de route estão sendo instanciados e inicializados. Eventos de ativação disparam para cada route na árvore de routes, incluindo routes pai e filha.

Eventos de conclusão de navegação

Estes eventos representam o resultado final de uma tentativa de navegação. Toda navegação terminará com exatamente um destes eventos, indicando se teve sucesso, foi cancelada, falhou ou foi pulada.

Outros eventos

Há um evento adicional que ocorre fora do ciclo de vida principal de navegação, mas ainda é parte do sistema de eventos do router.

Próximos passos

Saiba mais sobre guards de route e tarefas comuns do router.