Angular Academy · Aula

Eventos do roteador e navegação

Responda aos eventos do ciclo de vida da navegação.

Eventos do roteador e navegação é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O fluxo de eventos do roteador

Router.events é um observável que emite eventos durante o ciclo de vida da navegação: início, reconhecimento, verificações de guardas, resolução e fim. Inscreva-se para reagir globalmente à navegação.

Principais tipos de eventos

Eventos comuns: NavigationStart, NavigationEnd, NavigationCancel, NavigationError. Cada um é uma instância de classe que pode ser filtrada.

Escutando NavigationEnd

Filtre o fluxo para um tipo de evento específico com filter e uma verificação 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));

Indicador global de carregamento

Exiba um indicador de carregamento entre NavigationStart e NavigationEnd/Cancel/Error.

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

Rolando para o topo durante a navegação

Redefina a posição da rolagem após cada navegação bem-sucedida. (Também existe o recurso integrado scrollPositionRestoration.)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

Rastreamento de páginas para análise

NavigationEnd é o ponto ideal para registrar visualizações de página nas ferramentas de análise.

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

Navegação programática

router.navigate recebe um vetor de comandos; router.navigateByUrl recebe uma string de URL completa. Ambos retornam uma promessa que é resolvida com a indicação de que a navegação foi bem-sucedida.

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

Navegação relativa

Use relativeTo para navegar em relação à rota atual, por exemplo, a partir de um componente filho.

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink e estado ativo

Nos modelos, routerLink gerencia a navegação de forma declarativa, e routerLinkActive adiciona uma classe CSS ao link ativo.

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

Tratamento de NavigationError

Inscreva-se em NavigationError para tratar navegações malsucedidas (por exemplo, devido a uma resolução ou carregamento tardio com falha) e exibir uma mensagem amigável.

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

Filtragem de eventos com tipos

O Angular também oferece a tipagem RouterEvent; um predicado de proteção de tipo em filter fornece um evento corretamente tipado ao assinante, sem conversão de tipo.

Verificação rápida

Teste sua compreensão sobre eventos do roteador.

Recapitulação: eventos do roteador e navegação

Router.events expõe o ciclo de vida da navegação.

Filtre por NavigationStart/End/Cancel/Error.
Controle indicadores de carregamento, redefinição da rolagem e análise.
Navegue usando navigate/navigateByUrl ou routerLink.

Você concluiu o Angular Router Avançado.

Perguntas Frequentes

A aula “Eventos do roteador e navegação” é grátis?

Sim — o texto completo de “Eventos do roteador e navegação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Eventos do roteador e navegação”?

Responda aos eventos do ciclo de vida da navegação. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Eventos do roteador e navegação”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Parâmetros de rota e parâmetros de consulta
Resolvers e dados de rota
Guardas de rota funcionais
Eventos do roteador e navegação

← Voltar para Angular Academy