컴포넌트 메소드에서 관찰 만들고, 그는 다음과 같습니다 이벤트 핸들러

Question

내가 구성 요소를 가지고,라고한다.

클릭, 흐림 등의 "기본"DOM 이벤트에 대한 처리기가 있다면 Observable.fromEvent을 사용했을 것입니다. 그러나이 경우에는 적용 할 수없는 것 같습니다 관련된 기본 이벤트가 아님). 이 관련된 여러 핸들러가있는 경우 유지 관리가 매우 지루한해야하기 때문에, 더 나은 방법이있을 것 같다

@Component({ 
    template: ` 
    ... 
    <child-component (childEvent)="onChildEvent()"></child-component> 
` 
}) 
export class ParentComponent implements OnInit, OnDestroy { 
    private childEventStream: Observable<void>; 

    // I am not sure, what is the type of this, 
    // seems like an internal RxJS thing 
    private observer: any; 

    onChildEvent() { 
     this.observer.next(); 
    } 

    ngOnInit() { 
     this.childFinishedStream = Observable.create(
      observer => this.observer = observer; 
     ); 
    } 

    ngOnDestroy() { 
     this.observer.completed(); 
    } 
} 

것을 : 마음에 오는

유일한 것은이 같은 것입니다.

Answer 1

EventEmitter을 원하지 않으십니까?

이

는 다음과 같이 생성됩니다

@Component({ 
    template: ` 
     <child-component (finished)="onChildFinished($event)"></child-component> 
    ` 
}) 
export class ParentComponent { 

    onChildFinished(data: number) { 
     //... 
    } 
} 

그리고 하위 구성 요소는 Output를 사용하여.

@Component({ 
    selector: 'child-component', 
    template : `hi` 
}) 
export class ChildComponent { 

    @Output() 
    public finished: EventEmitter<number> = new EventEmitter<number>(); 

    private _imFinishing(): void { 
     finished.emit(1); 
    } 
} 

아마도 귀하의 질문을 이해하지 못하고 있지만 이것이 원하는 것으로 보입니다.