Como Obter a Rota Atual em Angular

Neste artigo você aprenderá a obter a Rota atual em Angular, uma ação interessante para aplicações com várias páginas

Fala programador(a), beleza? Bora aprender mais sobre Angular!

Em aplicações web modernas, especialmente as desenvolvidas com frameworks como o Angular, rotas desempenham um papel crucial na definição da experiência do usuário.

Elas nos ajudam a navegar entre diferentes partes de um aplicativo sem a necessidade de recarregar toda a página.

Mas, em algum momento, durante o desenvolvimento, você pode se perguntar: “Como posso obter a rota atual no Angular?”.

Neste artigo, vamos explorar diferentes maneiras de obter essa informação.

O Serviço Router no Angular

O Angular fornece um serviço embutido chamado Router que facilita a manipulação e consulta de rotas. Uma das muitas coisas que podemos fazer com ele é obter a rota atual.

Acessando a Rota Atual Através do Snapshot

Uma das maneiras mais diretas de acessar a rota atual é através do snapshot do objeto ActivatedRoute.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-rota-atual',
  template: '<p>Rota Atual: {{ rotaAtual }}</p>'
})
export class RotaAtualComponent implements OnInit {
  rotaAtual: string;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.rotaAtual = this.activatedRoute.snapshot.url[0].path;
  }
}

Neste exemplo, estamos usando a propriedade snapshot do ActivatedRoute para obter a URL atual e armazená-la na variável rotaAtual.

Usando Eventos do Router para Detectar Mudanças de Rota

Em vez de apenas obter a rota atual uma vez, podemos querer reagir a mudanças na rota. Isso é útil, por exemplo, para atualizar a interface do usuário ou executar lógicas específicas com base na rota.

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

@Component({
  selector: 'app-rota-atual-evento',
  template: '<p>Rota Atual: {{ rotaAtual }}</p>'
})
export class RotaAtualEventoComponent implements OnInit {
  rotaAtual: string;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.rotaAtual = event.url;
      }
    });
  }
}

Neste exemplo, nos inscrevemos nos eventos do Router e atualizamos a variável rotaAtual sempre que detectamos um evento de NavigationEnd.

Obtendo a Rota Atual em Serviços

Em algumas situações, podemos querer acessar a rota atual fora de um componente, como em um serviço. Nesse caso, o processo é um pouco diferente.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RotaService {
  constructor(private router: Router) {}

  obterRotaAtual(): string {
    return this.router.url;
  }
}

Aqui, criamos um serviço RotaService que possui um método obterRotaAtual() para retornar a rota atual. Para isso, utilizamos a propriedade url do serviço Router.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

O Angular, com seu sistema de roteamento robusto, facilita a obtenção e manipulação de rotas.

Seja através do ActivatedRoute, ouvindo eventos com o Router, ou dentro de serviços, temos várias maneiras de acessar a rota atual.

Estas técnicas são essenciais para criar aplicações interativas e dinâmicas que reagem às mudanças de rota, oferecendo aos usuários uma experiência fluida e intuitiva.

Ao entender esses conceitos, você estará mais preparado para lidar com os desafios que surgem ao construir aplicações Angular complexas.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.