Ein Mediator mit Angular 2

Letztes Jahr habe ich Euch gezeigt, wie man einen Mediator mit ECMAScript 6 erstellt. Heute erstellen wir einen neuen Mediator in Form eines PubSub-Service. Allerdings verwenden wir diesmal Angular 2 und TypeScript. Angular 2 macht uns das Leben in diesem Zusammenhang noch einmal etwas leichter.

Angular 2 hat ein schönes Konzept namens EventEmitter. EventEmitter entsprechen quasi einem Kanal in unserem PubSub-Service. Andere Komponenten können subscriben und unsubscriben, wie wir es auch im Mediator im vorherigen Artikel realisiert hatten. Das bedeutet für uns, dass sich der Code noch einmal deutlich reduziert. Der fertige Service hat knapp 30% weniger Zeilen Code als der gleiche Service in ECMAScript 6 hatte.

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

@Injectable()
export class PubSubService {

  private channels: {[name: string]: EventEmitter<any>} = {};

  register(name: string): void {
    if (typeof this.channels[name] === 'undefined') {
      this.channels[name] = new EventEmitter();
    }
  }

  publishTo(name: string, data: any): void {
    this.register(name);
    this.channels[name].emit(data);
  }

  subscribeTo(name: string, callback: Function): any {
    this.register(name);
    return this.channels[name].subscribe(callback);
  }

}

Ich denke ich muss an dieser Stelle nicht mehr erklären, wie der Service grundsätzlich zu nutzen wäre. Lasst mich hier nur auf eine Besonderheit eingehen. Dadurch das die subscribeTo-Funktion die Subscription zurück gibt, können wir nun auch wieder einfacher unsubscriben.

Wir melden uns wie gehabt am gewünschten Kanal an:

var subscription = pubsub.subscriptTo('my channel', myCallback);

Abmelden können wir uns nun allerdings direkt über die Subscription:

subscription.unsubscribe();

Was haltet Ihr davon? Welche Variante gefällt Euch besser? Ich bin gespannt auf Eure Antworten.