摘要：采用觀察者模式，通過其訂閱發布機制，可以簡化數據傳輸的過程，使每個模塊獨立起來，我們的模塊能更加專注于業務代碼的編寫。

場景

如上圖，在一個歌曲詳情模塊，假設有2個子模塊，歌曲模塊和評論模塊。

在歌曲模塊和評論模塊中都有評論數量這個屬性，當用戶在評論模塊發布了一條評論后，評論模塊和歌曲模塊的數量要同步更新。

評論模塊的數量很好更新，歌曲模塊的評論數量怎么同步更新呢？

下面介紹幾種實現方法。
1. 雙向綁定實現

思路：

在AppComponent將評論數量count作為輸入參數(@Input)傳遞給CommentComponent和MusicComponent，當AppComponent中的評論數量改變時，MucisComponent中的評論數量也會同時改變。
當CommentComponent更新評論數量count時，通過輸出參數(@Output)更新AppComponent中的評論數量count，MusicComponent中的評論數量count就會跟著改變了。

AppComponent

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `

              
              
             
`
})
export class AppComponent {
  count:number = 0;

  constructor() {

  }
}

MusicComponent

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-music",
  template: `

    
歌曲模塊
    
評論數:{{ count }}
    
`,
  styleUrls: ["./music.component.css"]
})
export class MusicComponent{
  // 評論數
  @Input()
  count:number;

  constructor() { }

}

CommentComponent

import { Component, EventEmitter, Input, Output } from "@angular/core";

@Component({
  selector: "app-comment",
  template: `

              
評論
              
評論數：{{ count }}
              

                
              
              

                發布
              
              

                

                  {{ item }}
                
              
            
`
})
export class CommentComponent {
  // 評論數
  @Input()
  count:number = 0;

  // 評論數改變事件
  @Output()
  countChange:EventEmitter = new EventEmitter();

  // 評論列表
  comments:string [] = [];

  constructor() { }

  // 發送評論
  send(content) {
    if (content.value) {
      this.comments.push(content.value);
      this.count++;
      this.countChange.emit(this.count);
    }
  }

}

2. 觀察者模式實現

思路

構建一個觀察者對象，觀察者對象擁有注冊（regist），發布（fire），移除（remove）三個方法。在angular2中可以通過依賴注入注入到CommentComponent和MusicComponent。

在MusicComponent中注冊（regist），‘count’ 事件。

當用戶發送評論時，在CommentComponent中發布（fire），‘count’事件。

構造觀察者對象

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

@Injectable()
export class ObserverService {
    /**
     * 消息隊列
     * 用數組保存每一種消息的事件隊列，
     * eventList["count"] = []
     * 注冊消息時將事件回調函數push到事件隊列
     * eventList["count"].push(fn)
     * 發布消息時依次執行消息隊列中的每一個回調函數
     * for(let fn of eventList["count"]) {
     *    fn(data);
     * }
     */ 
    eventList = {};

    constructor() {

    }

    /**
     * 發布消息
     * @param name 消息名
     * @param data 消息數據
     */
    fire(name:string, data:any) {
        if (this.eventList[name]) {
            const fns = this.eventList[name];
            for(let fn of fns) {
                fn(data);
            }
        }
    }

    /**
     * 注冊消息
     * @param name 
     * @param fn 
     */
    regist(name:string, fn:any) {
        if (typeof fn === "function") {
            const fns = this.eventList[name];
            if (fns) {
                fns.push(fn);
            } else {
                this.eventList[name] = [fn];
            }
        }
    }

    /**
     * 移除消息
     * @param name 
     * @param fn 
     */
    remove(name:string, fn:any) {
        const fns = this.eventList[name];
        if (fns) {
            if ( fn ) {
                let i;
                for(i = 0; i < fns.length; i++) {
                    if (fns[i] === fn) {
                        break;
                    }
                }
                if (i < fns.length) {
                    fns.splice(i, 1);
                }
            } else {
                fns.length = 0;
            }
        }
    }
}

AppComponent

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `

              
              
             
`
})
export class AppComponent {
  constructor() {

  }
}

MusicComponent

import { ObserverService } from "../service/observer.service";
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-music",
  template: `

    
歌曲模塊
    
評論數:{{ count }}
    
`,
  styleUrls: ["./music.component.css"]
})
export class MusicComponent{
  // 評論數
  count:number;

  constructor(private observiceService:ObserverService) { 
    // 注冊消息
    this.observiceService.regist("count", count => this.count = count);
  }

}

CommentComponent

import { ObserverService } from "../service/observer.service.2";
import { Component, EventEmitter, Input, Output } from "@angular/core";

@Component({
  selector: "app-comment",
  template: `

              
評論
              
評論數：{{ count }}
              

                
              
              

                發布
              
              

                

                  {{ item }}
                
              
            
`
})
export class CommentComponent {
  // 評論數
  count:number = 0;

  // 評論列表
  comments:string [] = [];

  constructor(private observiceService:ObserverService) { }

  send(content) {
    if (content.value) {
      this.comments.push(content.value);
      this.count++;
      // 發布消息
      this.observiceService.fire("count", this.count);
    }
  }

}

3. 使用Rxjs中的Subject實現

subject參考

SubjectService

import { Observable, Subject } from "rxjs/Rx";
import { Injectable } from "@angular/core";

@Injectable()
export class SubjectService {

count:number = 0;
comment:Subject;

constructor() {
    this.comment = new Subject();
}

}

AppComponent

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `

              
              
             
`
})
export class AppComponent {
  constructor() {

  }
}

MusicComponent

import { SubjectService } from "../service/subject.service";
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-music",
  template: `

    
歌曲模塊
    
評論數:{{ count }}
    
`,
  styleUrls: ["./music.component.css"]
})
export class MusicComponent{
  // 評論數
  count:number;

  constructor(private subjectService:SubjectService) { 
    // 注冊消息
    this.subjectService.comment.subscribe(count => this.count = count);
  }

}

4. 小結

在使用雙向綁定進行多個的模塊間的數據傳輸時，可以看到，當需要傳遞某個變量時，我們需要在每個模塊中構造對應的@Input和@Output，借助父模塊來進行傳遞數據，過程比較繁瑣。
AppComponent

CommentComponent

MusicComponent

采用觀察者模式，通過其訂閱發布機制，可以簡化數據傳輸的過程，使每個模塊獨立起來，我們的模塊能更加專注于業務代碼的編寫。
AppComponent

MusicComponent

CommentComponent

借助Rxjs的Subject，我們能很方便的實現同樣的功能。