Como Enviar Dados Através de Rotas no Angular

Neste artigo você aprenderá a enviar dados através de rotas no Angular, ou seja, passar valores entre páginas

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

No desenvolvimento de aplicações web com Angular, uma das funcionalidades essenciais é a navegação entre componentes com o envio de dados.

Isso permite que informações sejam passadas de uma página para outra, mantendo a reatividade e a consistência do estado da aplicação.

Neste artigo, vamos explorar como enviar dados através das rotas no Angular, utilizando as melhores práticas e abordagens modernas.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Configurando o Angular Router

Antes de mais nada, é necessário configurar o RouterModule em nosso módulo de aplicação (app.module.ts), importando-o com as rotas desejadas:

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

const routes: Routes = [
  // Definindo rotas aqui
];

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

Definição de Rotas e Passagem de Dados Estáticos

Podemos definir dados estáticos em nossas rotas que serão acessíveis pelo componente que a rota renderiza:

const routes: Routes = [
  {
    path: 'pagina-detalhe',
    component: PaginaDetalheComponent,
    data: { informacao: 'Dado estático' }
  }
];

Utilização de Parâmetros de Rota para Dados Dinâmicos

Para dados dinâmicos, utilizamos parâmetros de rota que são segmentos da URL que podem variar:

const routes: Routes = [
  {
    path: 'usuario/:id',
    component: UsuarioComponent
  }
];

Acesso aos Dados de Rota no Componente

Dentro do componente UsuarioComponent, podemos acessar o parâmetro de rota id da seguinte maneira:

import { ActivatedRoute } from '@angular/router';

export class UsuarioComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

Navegação Programática com Passagem de Dados

Além de links diretos, podemos navegar programaticamente e enviar dados utilizando o serviço Router:

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

export class AlgumComponente {

  constructor(private router: Router) {}

  navegarComDados() {
    this.router.navigate(['/usuario', 123], { state: { user: 'UsuarioExemplo' } });
  }
}

Recuperação de Dados com Router State

Para acessar os dados enviados pelo estado da rota, você pode fazer o seguinte no componente de destino:

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

export class UsuarioComponent implements OnInit {
  dataFromRouter: any;

  constructor(private router: Router) {}

  ngOnInit() {
    const navigation = this.router.getCurrentNavigation();
    this.dataFromRouter = navigation?.extras?.state;
  }
}

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

Conclusão

Enviar dados através de rotas no Angular é uma prática comum e essencial para a criação de aplicações dinâmicas e interativas.

Com a configuração correta do RouterModule e o uso apropriado dos serviços ActivatedRoute e Router, é possível gerenciar o envio e recebimento de informações entre componentes de maneira eficiente e organizada.

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