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;
     })
   }

 }

整个通信流程 核心就是单例  只有一个服务的实例  目前就这么多了  不明白的留言交流吧