観測可能と観測可能

反応プログラミングは、アプリケーションが必要なデータを取得するために外部環境に要求するのではなく、アプリケーションが外部環境を観察するときに外部環境にデータストリームを解放し、それに反応してデータを取得します。

옵저버블は、データ・ストリームを作成および解放するオブジェクトです.옵저버ファイバチャネル解放データの取得
すなわち、データ消費者である傍観者対データ生産者傍観者구독(subscription)である.
Angularは、非同期データストリームを処理するAPI RxJSを使用する.
マウスの移動に応じて画面に座標を表示する例

import { Component, OnInit } from '@angular/core';

// ① RxJS 임포트
import { Observable, fromEvent } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <h3>Mouse Coordinates</h3>
    <h3>X: {{ posX }} Y: {{ posY }}</h3>
  `
})
export class AppComponent implements OnInit {
  mousePositon$ :Observable<Event>;
  posX: number = 0;
  posY: number = 0;

  ngOnInit() {
    // ② 옵저버블의 생성(DOM 이벤트를 옵저버블로 변환)
    // fromEvent 오퍼레이터는 DOM 이벤트를 옵저버블로 변환하는 오퍼레이터이다.
    // 데이터를 생산해내는 것이면 무엇이든 옵저버블로 만들 수있다.
    // 이로서 mousePosition$ 에 event가 담겼고
    this.mousePositon$ = fromEvent(document, 'mousemove');

    // ③ 옵저버는 옵저버블을 구독하고 옵저버블이 방출한 데이터를 전파받아 사용한다.
    // 옵저버블을 구독하면 데이터 스트림을 받을수 있다.
    // 여기 예제에서는 event에 담겼다.
    this.mousePositon$.subscribe(
      (event: MouseEvent) => {
        this.posX = event.clientX;
        this.posY = event.clientY;
      },
      error => console.log(error),
      () => console.log('complete!')
    );
  }
}