Como Retornar à Última Página no Angular

Neste artigo você aprenderá a como retornar à Última Página no Angular, algo muito comum ao lidar com páginas e rotas

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

A capacidade de navegar entre diferentes partes de uma aplicação é essencial, especialmente quando falamos de aplicações Single Page Application (SPA) como aquelas desenvolvidas com Angular.

Uma funcionalidade comum e muitas vezes requerida é permitir que os usuários retornem à última página visitada.

Neste artigo, vamos explorar como implementar essa funcionalidade no Angular.

Usando o Serviço Router

O Angular fornece um serviço poderoso chamado Router que ajuda a gerenciar a navegação.

Uma das características desse serviço é a capacidade de navegar para trás, replicando a funcionalidade de voltar do navegador.

Configurando o Router

Antes de usar o Router, é importante ter sua aplicação configurada para usar o roteamento do Angular. Se ainda não fez isso, siga os passos abaixo:

1. No seu módulo principal (geralmente o AppModule), importe RouterModule e Routes do pacote @angular/router.
2. Defina suas rotas. As rotas são, basicamente, uma array de objetos que mapeiam um caminho (URL) para um componente.
3. Configure o RouterModule com suas rotas no método imports do seu módulo.

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'pagina2', component: Pagina2Component },
    // ... outras rotas
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  // ...
})
export class AppModule { }

Navegando para a Última Página

Para voltar à última página no Angular, podemos usar o serviço Location disponível no pacote @angular/common.

Este serviço fornece um método back() que nos permite navegar para a última entrada no histórico do navegador.

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-meu-componente',
  template: `
    <button (click)="voltar()">Voltar</button>
  `
})
export class MeuComponente {

  constructor(private location: Location) { }

  voltar(): void {
    this.location.back();
  }
}

Considerações ao Usar o Método back()

1. Estado da Página: Assim como em outras abordagens, voltar à última página pode não restaurar o estado anterior da página. Por isso, sempre teste e garanta que a experiência do usuário seja a esperada.
2. Origem Externa: Se o usuário chegou à sua aplicação a partir de um site externo, o método back() irá levá-lo de volta a esse site. Este comportamento pode não ser o desejado em todos os cenários.
3. Histórico Vazio: Se não houver histórico de navegação, o método back() não terá efeito. É bom ter uma estratégia alternativa para esses casos.

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

Conclusão

O Angular, sendo um framework robusto, oferece ferramentas poderosas para gerenciar a navegação e melhorar a experiência do usuário.

Utilizar o serviço Location é uma maneira eficaz de permitir que os usuários retornem à última página visitada.

Contudo, é essencial estar ciente das nuances e garantir que essa funcionalidade seja implementada de forma que beneficie o usuário final.

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