A principal função da utilização do BehaviorSubject é permitir uma fonte única de dados. Com uma visão centralizada de dados, o BehaviorSubject auxilia quando diversos componentes possuem a necessidade de utilizar o mesmo dado. Sabendo que um dado pode ser alterado por um componente ou usuário ao selecionar ou inserir algo, todos os componentes terão o dado mais atualizado para consultar.
Utilizaremos a biblioteca RxJS que possui observadores e observáveis. Da biblioteca vamos utilizar o Subscription que funciona de forma muito parecida com o Observable. Com ele nós podemos utilizar o método add, onde adicionamos o objeto que será "observado". Além disso, utilizaremos o BehaviorSubject, que será utilizado para conter o valor centralizado, e por emitir que o objeto sofreu alteração no valor atual.
O que faremos em nosso exemplo?
Vamos supor que existe um sistema e que em seu menu está contido um filtro. Esse filtro, é responsável por filtrar vários componentes da tela. Alguns componentes dessa tela necessitam saber o que está contido no filtro, para atualizar os seus dados.
Agora, mãos a massa!
Primeiro, vamos criar um objeto para ser o filtro. Para simplificar o nosso exemplo, o nosso filtro é apenas um filtro de perfil.
Agora criaremos a classe mais importante do nosso exemplo, o FiltroService. O Service será criado para que o sistema fique desacoplado, permitindo que outras páginas possam utilizar o mesmo filtro. Em nosso service, ficará o nosso filtro único, utilizando o BehaviorSubject. Então, toda vez que o filtro for alterado, o método updateFiltro será chamado recebendo o novo filtro. O filtro centralizado irá receber o novo filtro, e enviar a todos os componentes que assinam o BehaviorSubject por meio do método next.
Por último, nosso exemplo irá mostrar como "assinar" o BehaviorSubject do service. Vamos criar a classe GraficosComponent, e como você pode ver na figura, foi criado um objeto subs do tipo Subscription que como eu tinha falado anteriormente, ele nos possibilita adicionar o objeto que queremos "observar". Então no método ngOnInit, é adicionado o objeto filtroPagina que é um BehaviorSubject e está no FiltroService que criamos anteriormente.
Concluindo
Como visto, o nosso componente GraficosComponent "assinou" o BehaviorSubject que contém o dado centralizado e assim como o GraficosComponent, qualquer outro componente que precise do dado do filtro atualizado, deve assinar, esperar ser notificado de alguma alteração e o próprio componente realiza as atualizações necessárias após receber o filtro atualizado.
Bom, espero ter ajudado!
Top comments (0)