이벤트 엔진으로서의 Observable

Observable과 Subscriber는 함께 구성 요소 간 알림 시스템의 구성 요소를 만듭니다. 이것은 고전적인 이벤트 및 이벤트 핸들러 모델의 원형입니다. Angular에서 모든 EventEmitter는 Observable입니다.

Note that the DOM doesn't support the Observable internally. Everything in the DOM still uses the older Event and Event Handler model.

구독자와 Observable

export class test{
  private subscriber: Subscriber<boolean>;
  const observable$: Observable<boolean> = 
    new Observable<boolean>(
      sub => {
         this.subscriber = sub;
      }
   )
}

위의 이 패턴에는 두 개의 변수가 있습니다. 하나는 구독자이고 다른 하나는 관찰 가능합니다. Observable은 다른 코드가 Observable을 구독하기 때문에 const이며 구독을 파괴하지 않고는 변경할 수 없습니다.

구독자는 이 모듈에서만 내부적으로 사용됩니다. 이것이 우리가 private 키워드를 사용하는 이유입니다.

새로운 Observable이 생성되면 람다 식에 표시된 대로 구독자를 전달합니다.

new Observable<boolean>(
// the lambda expression accepting a subscriber.
      sub => {
         // expose this globally 
         this.subscriber = sub;
      }
   )

변경 알림은 어떻게 합니까?

테스트 클래스 인스턴스에서 ... 다음과 같이 구독자 다음 함수를 사용합니다.

this.subscriber.next(true);
//later 
this.subscriber.next(false);

구독

let test = new Test();
test.observable$.subscribe(valid=>{
   //this is the event handler
});

간단하고 간결하며 응답성이 뛰어납니다.

더 쉬운 구현?

Angular에는 더 쉬운 구현이 있습니다.

someEvent: EventEmitter<boolean> = 
    new EventEmitter<boolean>();

권장 사항은 이벤트 이미터가 @Output으로 장식되도록 하는 것입니다. 이를 통해 소비자는 HTML 계층에 노출된 속성을 통해 구독에 액세스할 수 있습니다. 이 솔루션이 작동하는 동안 간접 참조 레이어가 추가로 있습니다.

//myHandler is an indirect reference to the javascript code.
<app-other (eventEmitter)='myHandler'></app-other>

출력 대신 ViewChild 사용

@ViewChild는 구독을 쉽게 연결할 수도 있습니다. 우리는 이 방법이 더 직접적이기 때문에 더 좋아합니다. 이와 같이:

@ViewChild(otherComponent) other:OtherComponent;

//direct reference via a lambda expression
other.someEvent.subscribe((valid)=>{
    //do something with the valid event
});

위의 코드에서 HTML은 EventEmitter를 간접적으로 연결하지 않고 한 줄의 코드에 직접 연결합니다.

요약
Angular를 사용하는 경우 EventEmitter를 사용합니다. 그렇지 않은 경우 대신 다른 패턴을 사용합니다.

JWP2020