O objetivo desse artigo será apresentar um passo a passo ensinando a utilizar o BehaviorSubject para compartilhamento de dados entre componentes de um projeto desenvolvido em Angular 4.

Para quem não conhece o BehaviorSubject, ele herda das classes Rx.Observable e Rx.Observer. Com ele, nós podemos alterar dados em tempo de execução.

Para esse artigo, nós iremos partir de um projeto criado com o Angular Cli em um ambiente Windows, mas todos os exemplos demonstrados aqui irão funcionar em qualquer outro sistema operacional. Caso queira baixar o projeto que utilizamos para esse artigo, segue o link da versão final do código no GitHub.

Nosso primeiro passo será abrir o projeto em um editor de texto, para esse artigo iremos utilizar o Visual Studio Code, uma IDE desenvolvida pela Microsoft que esta sendo muito adotada pelos desenvolvedores de todas as linhagens, por nos possibilitar editar códigos em qualquer sistema operacional. Caso ainda não esteja utilizando ela e queira experimentar, basta clicar no link VS Code e escolher a versão que rode no seu sistema operacional.

Conforme mencionado acima, nós iremos partir de um projeto já criado. Com ele aberto em sua IDE de preferência, note que nós temos a seguinte estrutura:

Vamos fazer uma navegação rápida para que possamos entender os principais arquivos que foram criados para esse artigo. Bom, dentro do diretório app nós temos três componentes: AppComponent, HomeComponent e AboutComponent. Em seguida, nós temos um diretório models para o nosso user.ts e continuando abaixo dele nós temos um outro diretório chamado services, onde temos o nosso DataService responsável por alterar os dados em tempo de execução e, por fim, temos o nosso arquivo de rota app.routing.ts.

Caso queria ver mais detalhes sobre como criar rotas em um projeto Angular, basta clicar no link Criando Rotas, onde demonstramos esse processo passo a passo.

Vamos agora entender a nossa classe DataService:

Na linha 2 estamos importando o modulo BehaviorSubject.

Na linha 3 estamos importando o nosso modulo User, para que possamos alterar ele em tempo de execução.

Na linha 9 estamos criando uma instancia do module BehaviorSubject e passando como parâmetro a nossa classe user.

Na linha 10 nós estamos criando uma referência para Observable <User>.

Na linha 16 estamos criando um método para alterar o valor do nosso user e notificar todos os outros componentes que assinarem ele.

Agora nos componentes Home e About, nós temos um código parecido onde estamos importando o nosso Service no construtor, e em ngOnInit estamos dando um subscribe em user.

public user: User;
constructor( private router: Router,private data: DataService) {  }
ngOnInit() {
    this.data.currentMessage.subscribe(users => this.user = users);
    console.log(this.user);
  }

A única diferença entre esses componentes é que em Home nós temos um método que irá alterar a propriedade name do user.

changeName(name) {
this.user.Name = name;
this.data.changeMessage(this.user)
}

Bom, agora execute ng serve no seu terminal para que testarmos nosso código. Caso tudo esteja ok, a primeira rota que ele irá nos direcionar será para o nosso HomeComponent conforme podemos ver na imagem abaixo:

Notem que no nosso template nos temos um property binding, que está recebendo o nome que definimos inicialmente no nosso DataService. Agora clique em alterar o nome e depois em enviar para o About. Podemos ver esse passo no gif abaixo:

Como podemos observar, nós recebemos o nome que definimos em DataService, alteramos ele e passamos para o nosso AboutComponent.

Bom, com isso nós conseguimos passar dados entre componentes e também podemos alterar o estado deles conforme estamos passando de um lado para o outro.