Como Passar Dados para Componentes Roteados no Angular

Aprenda a passar dados para componentes roteados no Angular de forma eficaz. Entenda as diferentes abordagens e técnicas para compartilhamento de dados entre rotas.

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

Quando desenvolvemos aplicações Angular, uma das tarefas mais comuns é passar dados entre diferentes componentes, especialmente quando se trata de roteamento.

Neste artigo, vamos explorar as formas de como você pode passar dados para componentes roteados no Angular de maneira eficiente e eficaz.

Utilizando Parâmetros de Rota

Uma das maneiras mais diretas de passar dados em Angular é através de parâmetros de rota.

Esses parâmetros são parte do URL e podem ser facilmente lidos pelo componente que está sendo roteado.

Exemplo:

// No seu arquivo de roteamento (app-routing.module.ts)
{ path: 'detalhes/:id', component: DetalhesComponent }

// No seu componente (detalhes.component.ts)
import { ActivatedRoute } from '@angular/router';

export class DetalhesComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id'];
    });
  }
}

Neste exemplo, o componente DetalhesComponent está acessando o parâmetro id fornecido na URL.

Compartilhando Dados com Serviços

Para compartilhar dados mais complexos ou que não se encaixam bem em parâmetros de URL, você pode usar serviços Angular.

Exemplo:

// No seu serviço (dados.service.ts)
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DadosService {
  private dados: any;

  definirDados(dados: any) {
    this.dados = dados;
  }

  obterDados() {
    return this.dados;
  }
}

Você pode então injetar esse serviço em qualquer componente que precise acessar esses dados.

Pré-carregamento de Dados com Resolve

O Angular permite que você pré-carregue dados para seus componentes antes de eles serem apresentados na tela, usando o Resolve.

Exemplo:

// No seu resolver (dados.resolver.ts)
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { DadosService } from './dados.service';

@Injectable({
  providedIn: 'root'
})
export class DadosResolver implements Resolve<any> {
  constructor(private dadosService: DadosService) {}

  resolve() {
    return this.dadosService.obterDados(); // Poderia ser uma chamada HTTP
  }
}

E no seu arquivo de roteamento, você usaria o resolver como parte da configuração da rota.

Gerenciando o Estado com NgRx

Para aplicações de maior escala, o gerenciamento de estado pode se tornar complexo.

O NgRx oferece uma solução baseada em Redux para gerenciar o estado da sua aplicação de maneira previsível.

Exemplo:

// Em suas ações (dados.actions.ts)
export const carregarDados = createAction('[Dados] Carregar Dados');

// No seu reducer (dados.reducer.ts)
const _dadosReducer = createReducer(
  initialState,
  on(carregarDados, state => ({ ...state, carregando: true })),
  // outras ações
);

export function dadosReducer(state, action) {
  return _dadosReducer(state, action);
}

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

Conclusão

Passar dados entre componentes roteados no Angular é uma tarefa fundamental e pode ser realizada de várias maneiras.

Ao escolher a melhor abordagem para a sua necessidade, considere o tamanho e a complexidade da sua aplicação, assim como a natureza dos dados que você está passando.

Agora que você entende melhor como passar dados em uma aplicação Angular, é hora de colocar esses conhecimentos em prática.

Se você tiver dúvidas ou experiências para compartilhar, deixe seu comentário abaixo!

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