angular 的官網給出了父子組件之間數據交互的方法，如ViewChild、EventEmitter
但是如果要在同級組件之間進行數據同步，似乎并沒有給出太多的信息。
?
有時候我們想，在一個組件中修改數據之后，馬上反映到另外一個組件中， 或者可能需要調用另外一個組件中的方法，這時候，我們就可以借助于 rxjs 了。
下面源碼在 https://github.com/eleven26/angular-observer
?
1、首先，我們定義一個用于在應用內進行數據交互的 service
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]}
}
2、我們在需要監聽數據變化的組件中加入以下代碼，此處是直接寫在了 AppComponent 中
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<any> = Observable.create((observer) => {// payload 用以存放不同組件之間需要交互的數據let payload = this.storeService.get('payload');if (payload) {// do somethingif (payload['type'] == 'set-title') {this.title = payload['title'];}this.storeService.remove('payload');}observer.next();});// 保存到公共 service 中，以便不同組件之間可以使用同一個觀察者對象this.storeService.set('myObserver', myObserver);}
}
上面的代碼中，我們定義了一個可觀察對象 myObserver，我們在此方法上調用 subscribe 的時候，Observable.create 的回調就會被調用，
然后，我們從 StoreSrevice 中取得需要處理的數據，具體數據格式自由規定，
我們處理完數據之后，把相關數據從 StoreSrevice 中移除
?
同時，我們需要把 myObserver 保存到 StoreService 中，以便不同組件獲取到的是同一個 observer。
?
3、定義一個 A 組件，用來生產 payload，類似于 生產者-消費者
import {Component, OnInit} from '@angular/core';
import {StoreService} from './store.service';
import {Observable} from 'rxjs/Observable';@Component({selector: 'a-component',template: `<h1>A Component'title: {{title}}</h1><input type="text" (keyup)="change($event.target.value)">`,styles: []
})
export class AComponent implements OnInit{title = 'a title';public myObserver: Observable<any>;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(() => {});}
}
我們在該組件輸入 title 的時候，發現 AppComponent 的 title 也發生了相應的變化。
這樣一來，我們的效果就實現了。
?
?
