TL; DR :

아니요, 수동으로 구독하지 말고 서비스에서 사용하지 마십시오. 구성 요소에서 이벤트를 생성하려면 문서에 표시된대로 사용하십시오. 각도의 추상화를 물리 치지 마십시오.

대답:

아니요, 수동으로 구독하면 안됩니다.

EventEmitter 는 각도 2 추상화이며 유일한 목적은 구성 요소에서 이벤트를 생성하는 것입니다. Rob Wormald 의 의견 인용

[…] EventEmitter는 실제로 앵귤러 추상화이며, 컴포넌트에서 커스텀 이벤트를 생성하는 경우에만 사용되어야합니다. 그렇지 않으면 Rx를 다른 라이브러리처럼 사용하십시오.

이것은 EventEmitter의 문서에서 실제로 명확하게 설명되어 있습니다.

지시문 및 구성 요소에서 사용하여 사용자 정의 이벤트를 생성합니다.

사용에있어 무엇이 문제입니까?

Angular2는 EventEmitter가 계속 Observable임을 보장하지 않습니다. 따라서 코드가 변경되면 코드를 리팩토링해야합니다. 우리가 액세스해야하는 유일한 API는 emit()메소드입니다. EventEmitter를 수동으로 구독해서는 안됩니다.

위에 언급 된 모든 내용은이 Ward Bell의 의견 (기사 및 해당 의견에 대한 답변 을 읽는 것이 좋습니다) 에서 더 명확 합니다. 참조 인용

EventEmitter를 계속 Observable로 간주하지 마십시오!

앞으로있을 Observable 운영자를 의지하지 마십시오!

이것들은 곧 더 이상 사용되지 않으며 출시 전에 제거 될 것입니다.

자식 구성 요소와 부모 구성 요소 간의 이벤트 바인딩에만 EventEmitter를 사용하십시오. 구독하지 마십시오. 해당 메소드를 호출하지 마십시오. 전화 만eve.emit()

그의 의견은 오래 전에 Rob의 의견과 일치합니다.

그렇다면 올바르게 사용하는 방법은 무엇입니까?

단순히 컴포넌트에서 이벤트를 생성하는 데 사용하십시오. 다음 예제를 살펴보십시오.

@Component({
    selector : 'child',
    template : `
        <button (click)="sendNotification()">Notify my parent!</button>
    `
})
class Child {
    @Output() notifyParent: EventEmitter<any> = new EventEmitter();
    sendNotification() {
        this.notifyParent.emit('Some value to send to the parent');
    }
}

@Component({
    selector : 'parent',
    template : `
        <child (notifyParent)="getNotification($event)"></child>
    `
})
class Parent {
    getNotification(evt) {
        // Do something with the notification (evt) sent by the child!
    }
}

그것을 사용하지 않는 방법?

class MyService {
    @Output() myServiceEvent : EventEmitter<any> = new EventEmitter();
}

그만해. 넌 이미 틀렸어 …

이 두 가지 간단한 예제가 EventEmitter의 올바른 사용법을 명확히하기를 바랍니다.

답변

export class MyServiceEvent {
    message: string;
    eventId: number;
}

export class MyService {
    public onChange: EventEmitter<MyServiceEvent> = new EventEmitter<MyServiceEvent>();

    public doSomething(message: string) {
        // do something, then...
        this.onChange.emit({message: message, eventId: 42});
    }
}

export class MyConsumer {
    private _serviceSubscription;

    constructor(private service: MyService) {
        this._serviceSubscription = this.service.onChange.subscribe({
            next: (event: MyServiceEvent) => {
                console.log(`Received message #${event.eventId}: ${event.message}`);
            }
        })
    }

    public consume() {
        // do some stuff, then later...

        this.cleanup();
    }

    private cleanup() {
        this._serviceSubscription.unsubscribe();
    }
}