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

@Injectable()
export class StoreService {
  public storageObj = {};

  set(key, value) {
    this.storageObj[key] = value;
  }

  get(key) {
    return this.storageObj[key];
  }

  remove(key) {
    delete this.storageObj[key]
  }
}

import {Component, OnInit} from '@angular/core';
import {StoreService} from './store.service';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';

  constructor(private storeService: StoreService) {}

  ngOnInit() {
    let myObserver: Observable = Observable.create((observer) => {
      // payload 用以存放不同组件之间需要交互的数据
      let payload = this.storeService.get('payload');
      if (payload) {
        // do something
        if (payload['type'] == 'set-title') {
          this.title = payload['title'];
        }

        this.storeService.remove('payload');
      }

      observer.next();
    });

    // 保存到公共 service 中，以便不同组件之间可以使用同一个观察者对象
    this.storeService.set('myObserver', myObserver);
  }
}

import {Component, OnInit} from '@angular/core';
import {StoreService} from './store.service';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'a-component',
  template: `
    
A Component'title: {{title}}
    
    
  `,
  styles: []
})
export class AComponent implements OnInit{
  title = 'a title';

  public myObserver: Observable;

  constructor(private storeService: StoreService) {}

  ngOnInit() {
    this.myObserver = this.storeService.get('myObserver');
  }

  change(new_title) {
    this.title = new_title;
    this.storeService.set('payload', {
      type: 'set-title',
      title: new_title
    });
    this.myObserver.subscribe(() => {});
  }
}