ANGULAR - 下面的 EventEmitter 服务是如何工作的？

Question

On my work, we've been using this service below to subscribe and emit notifications right and fourth. As a junior developer I already understand Input and Outputs of Angular and sort of how Emitters work.

But this service simplys confuse me. The dev who made this service already left the company and since this code is almost a boilerplate for all projects, I cannot ask him how exactly it works.

specifically this line: private static emitters: { [notificationName: string]: EventEmitter } = {}

import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class EventEmitterService {

    private static emitters: { [notificationName: string]: EventEmitter<any> } = {}

    static get(notificationName: string): EventEmitter<any> {
        if (!this.emitters[notificationName])
            this.emitters[notificationName] = new EventEmitter<any>();
        return this.emitters[notificationName];
    }
}

/** 
to SUBSCRIBE:

private subscriptions = new Subscription();   
constructor(){
    this.subscriptions.add( EventEmitterService.get("notification_name").subscribe(payload => this.notificationHandler(payload)) );
}

TO EMIT: 

EventEmitterService.get("notificationName").emit(payload); 

to UNSUBSCRIBE:

ngOnDestroy(){
    this.subscriptions.unsubscribe();
}
*/

Following instructions from the user Michael D, I've change the code

import { Subject } from 'rxjs';

private emitters: { [notificationName: string]: Subject<any> } = { };

and got this error:

The error was caused because the return of static get(notificationName: string): was not changed to Observable<any>

So the final form of service, updated according to MichaelD comment:

import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class EventEmitterService {

    // private static emitters: { [notificationName: string]: EventEmitter<any> } = {}
    private  emitters: { [notificationName: string]: Subject<any> } = {};


    get(notificationName: string): Observable<any>{
        if (!this.emitters[notificationName])
            this.emitters[notificationName] = new EventEmitter<any>();
        return this.emitters[notificationName];
    }
}

Answer 1

Event Emitter model basically follows the observable pattern. In above code I we created a static emitter means we can call it without an instance of class. So this will five us a behavior like utility. You need to understand only one thing. Emitters are constantly listening to the Events and as the event happens they emit the response regardless of success or failure. This response is pretty similar to the interrupt generated by hardware in our OS which make the CPU to listen that specific interrupt instead of doing other tasks. So when we have an update in out Event EventEmitter will broadcast that change and our listeners will detect it on that specific Event

Answer 2

I've been seeing this pattern of using EventEmitters in services frequently. EventEmitters are NOT meant to used in services. It is used to emit custom events from components to it's parent components.

The EventEmitter is an interface extension of RxJS Subject . If a multicast observable is required in the service, then the RxJS Subject (or BehaviorSubject ) could be used.

In your case, the emitter variable is an object with a property notificationName that will point to the emitter.

Also I do not understand the meaning of static here. The service is already made a singleton with the { providedIn: 'root' } argument. There isn't going to be multiple instances of the emitters .

You could also have the same behavior with the following

import { Subject } from 'rxjs';

private emitters: { [notificationName: string]: Subject<any> } = { };

Answer 3

private static emitters: { [notificationName: string]: EventEmitter } = {}

This line just means that emitters is an internal property of the EventEmitterService class of type object, for which keys are strings, and values instances of EventEmitter . It's being used to keep track of active subscriptions. The consumers of the service are not concerned with other consumers, they just want to emit or subscribe to a given notification, that's why it's private.

If you look at the EventEmitter interface, you'll see that you can indeed either emit or subscribe . When you emit you send a payload that will be passed as a parameter to the function consumers subscribed with.

When you subscribe to an EventEmitter , it returns a subscription which you can then unsubscribe from. When you add your EventEmitter subscription to subscriptions , you're allowing yourself to be able to unsubscribe to all of them at once by calling its unsubscribe .