Angular2 Communicating between sibling components

dispatcher.component.ts

import {Component, Input, OnChanges} from "@angular/core";
import {EmitterService} from "../services/emitter.service";

@Component({ selector: 'dispatcher', template: '' })

export class DispatcherComponent implements OnChanges {
  @Input() id: string;
  value = "dispatcher component value";

  ngOnChanges() {
    EmitterService.get(this.id).emit(this.value);
  }
}

emitter.service.ts

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

@Injectable()
export class EmitterService {
  private static _emitters: { [ID: string]: EventEmitter<any> } = {};

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

listener.component.ts

@Component({ selector: 'listener', template: '' })
export class ListenerComponent implements OnChanges {
  @Input() id: string;

  ngOnChanges() {
    EmitterService.get(this.id).subscribe(value => console.log(value));
  }
}

main.component.ts

@Component({
  providers: [EmitterService],
  selector: 'host',
  template: `
    <dispatcher [id]="host_id"></dispatcher>
    <listener [id]="host_id"></listener>
  `
})
export class HostComponent {
  public host_id: "HOST_COMPONENT";
  
  constructor(private _emitterService: EmitterService) {}
}