Passando Objetos na Navegação com Angular

Image for post
Image for post

Olá.

Neste artigo apresento duas abordagens para passar objetos na navegação de um componente para outro utilizando Angular 7.

O cenário proposto é o consumo de uma API de animes. Mais detalhes em https://kitsu.io.

A tela principal, que chamei de mestre, traz uma relação de animes com suas propriedades apresentadas em cards.

A ideia aqui é navegar até um componente (detalhes) que apresente mais características do anime selecionado, passando um objeto complexo com vários atributos

Image for post
Image for post

Se preferir, segue o vídeo do tutorial.

Criei dois componentes. No terminal fiz:

Solicitei ainda dois services.

O primeiro service é responsável pela lógica de acesso à API.

Declarei uma variável que recebe o endpoint da API. Coloquei o HttpClient no construtor e no método getData() solicito o retorno através do get, passando a url.

Defini uma interface Anime para mapear alguns campos da resposta.

anime.interface.ts

No arquivo app-routing.module.ts eu inclui no array de rotas três caminhos:

O primeiro path indica para iniciar no caminho mestre, associado ao componente MestreComponent, segundo path. O últitmo é uma rota para detalhes.

O arquivo app.component.html só contém a diretiva router-outlet.

No template html eu apresento o resultado da consulta, realizando um iteração na lista de objetos anime com *ngFor, conforme trecho do códgo abaixo:

Note que tenho dois botões, cada um com um event binding representando uma abordagem diferente. (O código completo está no Git, não se preocupe ;)

Na classe MestreComponent (mestre.component.ts) tenho um array de animes e uma injeção no construtor dos dois services criados e a classe responsável pela navegação no Angular.

No método ngOnInit() invocamos o método da api atribuindo o resultado a lista de animes.

1ª Abordagem — Service

No método goToDetalhesByService(anime:Anime), antes de navegar até o componente detalhes eu seto o objeto anime no service Data

A implementação da classe DataService (data.service.ts) é composta de um objeto anime e um get() e set() desse objeto.

2ª Abordagem — Status

Essa abordagem utiliza um recurso recente,o state, disponível na versão 7.2.

(https://github.com/angular/angular/blob/master/CHANGELOG.md#720-2019-01-07)

Passamos como parâmetro da navegação um propriedade status o objeto anime selecionado.

No componente Detalhes recupero o anime.

Lembre -se que o cenário é um exemplo, eu recupero o objeto prevendo as duas possibilidades.

Dessa forma, temos na classe DetalhesComponent (detalhes.component.ts) temos:

No método construtor, declaro uma variável que recupera a navegação e logo em seguida atribui ao objeto anime.

Para abordagem que utiliza um service, no método ngOnInit() verifico se existe, caso contrário, recupero do service através do método getAnime().

Bem tranquilo!!!

Há outras abordagens, mas prefi apresentar essas duas.

Se você leu até aqui…obrigado.

Link do exemplo no Git..

Até…

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store