컴포넌트와 디렉티브 출력의 RxJS 연동

팁: 이 문서는 컴포넌트와 디렉티브 출력을 알고 있다고 가정합니다.

@angular/core/rxjs-interop 패키지는 컴포넌트와 디렉티브 출력에 관련된 API를 두 가지 제공합니다.

RxJS 옵저버블을 기반으로 출력 생성하기

outputFromObservable을 사용하면 RxJS 옵저버블을 기반으로 값을 방출하는 컴포넌트 또는 디렉티브 출력을 생성할 수 있습니다:

import {Directive} from '@angular/core';
import {outputFromObservable} from '@angular/core/rxjs-interop';
import {Observable} from 'rxjs';

@Directive(/* ... */)
class Draggable {
  pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();

  // `pointerMoves$`가 값을 방출할 때마다 `pointerMove` 이벤트가 발생합니다.
  pointerMove = outputFromObservable(this.pointerMoves$);
}

Angular 컴파일러는 outputFromObservable 함수를 특별하게 처리합니다. outputFromObservable은 컴포넌트와 디렉티브의 프로퍼티를 초기화하는 곳에서만 호출할 수 있습니다.

출력을 subscribe하면 Angular는 해당 구독을 내부 옵저버블에 자동으로 전달합니다. 컴포넌트나 디렉티브가 종료되면 Angular는 값 전달을 중단합니다.

도움말: 명령형 코드로 값을 방출할 수 있다면 output()을 직접 사용하는 방법을 고려하세요.

컴포넌트나 디렉티브 출력으로 RxJS 옵저버블 생성하기

outputToObservable 함수를 사용하면 컴포넌트 출력으로 RxJS 옵저버블을 생성할 수 있습니다.

import {outputToObservable} from '@angular/core/rxjs-interop';
import {Component, output} from '@angular/core';

@Component(/*...*/)
class CustomSlider {
    valueChange = output<number>();
}

// `CustomSlider` 인스턴스 참조입니다.
const slider: CustomSlider = createSlider();

outputToObservable(slider.valueChange) // Observable<number>
    .pipe(...)
    .subscribe(...);

도움말: 요구사항을 충족한다면 OutputRef의 subscribe 메서드를 직접 사용하는 방법을 고려하세요.