angular2 組件之間通訊-使用服務通訊模式 2016.10.27 基於正式版ng2

工作中用到ng2的組件通訊 奈何官方文檔言簡意賅 沒說明白 自己搞明白后 整理后分享下

rxjs 不懂的看這篇文章 講很詳細 http://www.open-open.com/lib/view/open1462525661610.html

以下是服務代碼

import { Injectable } from '@angular/core';
import {Subject}from"rxjs/Subject";
@Injectable()
export class CService {
 private outputTitle = new Subject();
  //訂閱 
//聲明變量 訂閱Observer
  output$ = this.outputTitle.asObservable();

  //推送  調用next方法 Subject會向所有已經在其上注冊的Observer多路推送 theValue 

  UpData(message:any) {
    this.outputTitle.next(message);
  }
}

以下是子組件中的代碼 節選

import { Component, OnInit ,Input, 
import {CService}from"../shared/corresponded.service";//引入服務  單例模式

@Component({
//這里一定不要注冊服務提供商 也就是不要在里面聲明
  providers: []//不需要提供CService服務
   })
export class HomePostsComponent implements OnInit {

  constructor(
              //與父組件的cs服務實例相同 是同一個實例
              public  _CService:CService) {
  }

//自己業務需要在初始化的時候調用 所以就放在這里了  \
  ngOnInit() {
    //發送消息
//updata調用next方法 推送數據
    this._CService.UpData({title:"鈴鐺寵物",ico:""});
  }

}

以下是父組件代碼 節選

import { Component,OnInit,AfterViewChecked,AfterViewInit} from '@angular/core';
//引入服務
import {CService}from"./shared/corresponded.service";
@Component({
  //服務供應商 只在父組件使用  子組件不需要
  providers: [CService]
})
export class AppComponent implements OnInit,AfterViewChecked,AfterViewInit {
//此處cs 實例和子組件的實例是一樣的  都是同一個實例 
  constructor(private CS:CService) {

  }

  //在ngAfterViewChecked每次做完組件視圖和子視圖的變更檢測之后調用。 會執行多次
  //ngAfterViewInit初始化完組件視圖及其子視圖之后調用。只調用一次
  //訂閱組件信息  只寫了接收 沒寫發送 道理是一樣的 
  ngAfterViewInit() {
    let that = this;
    console.log("ngAfterViewInit");
    this.CS.output$.subscribe((value:any)=> {
      console.log(value);
      that.title = value.title;
      that.ico = value.ico;
    })
  }

  
}

整個通信流程 核心就是單例  只有一個服務的實例  目前就這么多了  不明白的留言交流吧