Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como compartilhar variaveis entre componentes

Referente ao curso Angular parte 3: upload, build e novos componentes

por Gedan Magalhães
| 136.2k xp | 52 posts
Desenvolvedor

Fala pessoal, beleza? O que devo utilizar para compartilhar dados entre componentes sem vinculo ? Tenho a seguinte estrutura: Cliente (pai) - possui router-outlet filhos [

  • dashboard
  • solicitar-emprestimo ] Em dashboard, eu utilizo um serviço onde retorna alguns dados para exibição, e em solicitar-emprestimo eu preciso verificar se a quantidade de "solicitações pendentes > 5", porém, essa informação já é alimentada em uma variável da dashboard, e para não enviar outra requisição contendo os dados que já possuo em outro componente, quero compartilhar essa variável. Quais seriam as soluções?
3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Gedan, tudo bem? Vamos lá:

O que devo utilizar para compartilhar dados entre componentes sem vinculo ?

Caso você queria compartilhar informações entre componentes sem vínculo, sugiro realizar através de eventos ou com algum gerenciador de estado.

Para realizar via eventos, aconselharia dar uma olhada na biblioteca PubSub.js:

https://www.npmjs.com/package/PubSub

Caso queira realizar através de um gerenciador de estado, para aplicações Vue, eu aconselho utilizar o Vuex:

https://vuex.vuejs.org/

Espero ter ajudado.

por Gedan Magalhães
| 136.2k xp | 52 posts
Desenvolvedor

No caso seria para aplicações em angular mesmo. Vou testar a lib pubsub. Obrigado pela resposta !

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Gedan, não sei porque achei que estava fazendo o curso de Vue, falha minha, respondi tanta dúvida hoje kkk

No caso, por ser um projeto em Angular você pode criar um service responsável por esse compartilhamento entre componentes, algo assim: https://github.com/mahenrique94/mymusic-frontend/blob/master/src/app/services/event.service.ts

Repare no EventService, ele faz exatamente o que o PubSub faria, porém, usa a RxJS por baixo dos panos.

Caso prefira utilizar um gerenciador de estado ao contrário de serviços, para Angular recomendo o NGRX:

Espero ter ajudado.