Angular: Subjects

Antes de começar a falar sobre subjects, precisamos passar por Observable e Subscribe. Bom, para quem já está trabalhando com Angular a algum tempo, já conhece o Observable. Agora, para aqueles que estão tendo o seu primeiro contato, segue uma breve descrição sobre Observable retirada do site tablelles:

Por definição é uma coleção que funciona de forma unidirecional, ou seja, ele emite notificações sempre que ocorre uma mudança em um de seus itens e a partir disso podemos executar uma ação. Digamos que ele resolve o mesmo problema que a versão anterior do Angular havia resolvido com o $watch, porém sem usar força bruta. Enquanto no $watch verificamos todo nosso escopo por alterações após cada $digest cycle (o que tem um grande custo na performance), com Observable esta verificação não acontece, pois para cada evento é emitida uma notificação para nosso Observable e então tratamos os dados.

Em outras palavras, o observable permite você fazer um subscribe em um método ou função para que possa receber as suas modificações. Para facilitar o seu entendimento, veja o exemplo abaixo:

@Injectable()
class NewsService {
 ...
 getNews(): Observable<News[]> {
    return this.http.get('sua API')
                    .map(res=>res.json())
                    .catch(err=> Observable.throw(err.message));
 } 
 ...
}

O trecho de código acima está bem simples, ele está buscando um lista de noticias e retornando ela no formato .json(). Para acessar o retorno desse método, você precisa fazer um subscribe nele. Seguindo o exemplo de news, veja abaixo o exemplo de um componente fazendo o subscribe em getNews().

import { NewsService } from './services/news.service';

@Component({
  /* Propriedades do componente*/
})
class NewsComponent {
  ...
  constructor(private newsService: NewsService){}

  private news: News[]; 
 
  getNews() {
    this.newsService.getNews()
                    .subscribe(
                      news => this.news = news,
                      error => /* Tratamos os erros aqui :) */);

  }
  ...
}

No exemplo acima, nós estamos chamando a função getNews() e dando um subscribe no seu retorno, assim que a resposta vier e for transformada em JSON, seremos notificados e o array news receberá a lista de notícias, ou caso ocorra algum erro no seu retorno, você pode tratar criando um método que notifique o seu usuário em error => seu método().

Bom, depois desse overview sobre Observable e subscribe, vamos entrar no tópico desse artigo o Subject.


Imagine o seguinte cenário: você precisa enviar algo para getNews(), mas não precisa fazer uma outra requisição a um WS (WEB Service) para receber esse retorno. Para esse tipo de situação nós podemos utilizar o Subject.

O subject permite fazer um subscribe e um publish, em outras palavras, ele nos permite enviar e receber dados. Para ficar mais claro, vamos criar um novo projeto e um exemplo utilizando o subject com o Angular Cli. Para isso, siga os passos abaixo:

Abra o seu terminal e execute o seguinte comando:

ng new angular-subject

O comando acima irá criar um novo projeto chamado angular-subject.

Para os próximos passos, você irá precisar de uma IDE, eu irei utilizar o VS Code, mas você pode utilizar uma de sua preferência. Abra o seu projeto e atualize o arquivo app.component.html com o seguinte trecho de código:

<div *ngIf="message">
  {{message}}
</div>
<app-home>
</app-home>

O próximo passo será criar um novo componente chamado HomCompenent. Para isso, execute o comando abaixo no seu terminal:

ng g c components/home

Depois que o comando acima finalizar, atualize o seu arquivo home.component.html com o seguinte trecho de código:

<input type="text" placeholder="Enter message" #message>
<button type="button" (click)="setMessage(message)" >Send message</button>

Note que no trecho de código acima estamos criando uma variável chamada #message e um método recebendo ela. Nos próximos passos nós iremos utilizar ela para enviar uma notificação.

Agora crie um novo serviço chamado MessageService,para gerenciar as suas notificações. Para isso, execute o seguinte comando no seu terminal:

ng g s service/message

O comando acima irá criar um novo arquivo chamado message.service.ts, no seguinte path: src\app\service\message.service.ts. Atualize ele com o trecho de código abaixo:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MessageService {
public message = new Subject<string>();
setMessage(value: string) {
    this.message.next(value); 
  }
}

Agora injete o serviço MessageService em HomeComponen:

import { Component } from '@angular/core';
import { MessageService } from '../../service/message.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor(public messageService:MessageService) { }
setMessage(event) {
    console.log(event.value);
    this.messageService.setMessage(event.value);
  }
}

Para testar o código desenvolvido nos passos anteriores, execute o comando abaixo no seu terminal:

ng serve

O comando irá abrir no seu navegador o seguinte endereço: http://localhost:4200/. Abaixo você tem uma imagem demonstrando esse passo:

Angular (subject)

Agora quando você enviar qualquer valor para variável #message dehome.component.html ela irá exibir esse valor em {{message}}que está em app.component.html.

Com isso finalizamos esse artigo, caso tenha interesse em baixar o projeto desenvolvido aqui, segue o seu link no GitHub: Angular-Subject.

Referências:

Zameer Ansari

tableless

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard