주제 - Angular의 RxJS

RxJS 주제는 값을 많은 관찰자에게 멀티캐스트할 수 있는 특수한 유형의 관찰자입니다.

일반 Observable이 유니캐스트인 반면(구독된 각 Observer는 Observable의 독립적 실행을 소유함) Subject는 멀티캐스트입니다. Subject는 Observable과 비슷하지만 많은 Observer에게 멀티캐스트할 수 있습니다.

실제 시나리오,

업데이트된 메시지를 표시하는 구성 요소가 있고 이 구성 요소를 재사용할 수 있고 3~4개의 상위 구성 요소에서 사용한다고 가정해 보겠습니다. 이 구성 요소는 업데이트된 메시지를 즉시 표시하기 위해 모든 곳과 동기화되는 방식으로 만들고 싶습니다. 받았다. 따라서 이러한 유형의 상황에서 Subject - RxJS는 동기화가 관련된 경우에 발생합니다.

새 서비스 만들기:

// message-service.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  public message = new Subject<string>();

  constructor() { }

  setMessage(value) {
    this.message.next(value);
  }
}

위의 서비스가 사용되는 상위 구성 요소의 1이므로 새 메시지가 입력될 때마다 이 서비스를 구독한 모든 상위 구성 요소는 모든 상위 구성 요소에서 업데이트된 메시지를 받습니다.

<!-- home.component.html -->

<input type="text" name="message" id="message">
<input type="button" value="Send" (click)="setMessage()">

// home.component.ts

import { MessageService } from 'services/message-service.service';

constructor(
    private messageService: MessageServiceService
  ) { }

ngOnInit() {
    this.getUpdatedMessage();
  }

getUpdatedMessage() {
    this.messageService.message.subscribe(
      res => {
        console.log('message', res);
      }
    )
  }

setMessage() {
    let message = (<HTMLInputElement>document.getElementById("message")).value;
    this.messageService.setMessage(message);
  }

그것이 모든 사람들입니다 ;)