Operator


オペレータは、ファイバを作成、変換、フィルタリング、エラー処理する機能を持つ関数です.
オペレータは新しいファイバチャネルを返します.
1.fromオペレータは、配列内の同じウィジェットをパラメータとして渡し、光ファイバを生成する.
2.光ファイバは、mapおよびfilterオペレータを使用して変形および濾過される.mapfilterOperatorはJavaScriptメソッドと似ています.
単純な例
// observable.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';

// RxJS 임포트
import { Observable, Subscription, from } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: '<p>{{ values }}</p>'
})
export class ObservableComponent implements OnInit, OnDestroy {
  myArray = [1, 2, 3, 4, 5];
  subscription: Subscription;
  values: number[] = [];

  ngOnInit() {
    // ① 옵저버블 생성
    // 배열과 같은 이터러블을 옵저버블로 만들려면 from 오퍼레이터를 사용
    const observable$ = from(this.myArray);
	
    // RxJS의 pipe() 기능을 이용하여 연산자를 서로 연결할 수 있다.
    // 여러기능들을 단일 기능으로 결합 시키는 역활
    //
    this.subscription = observable$
      .pipe(
        // ② 오퍼레이터에 의한 옵저버블 변형
        map(item => item * 2), // 2, 4, 6, 8, 10
        filter(item => item > 5), // 6, 8, 10
        tap(item => console.log(item)) // 6, 8, 10
      )
      // ③ 옵저버블 구독
      .subscribe(
        // next
        // 지속적으로 데이터를 성공적으로 전달 받으면 할일
        value => this.values.push(value),
        // error
      	// 데이터 받다가 에러나면 할일
        error => console.log(error),
        // complete
      	// 데이터 받기를 완료 하면 할인
        () => console.log('Streaming finished')
      );
  }

  ngOnDestroy() {
    // ④ 옵저버블 구독 해지
    this.subscription.unsubscribe();
  }
}