angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2

 1 import { Injectable } from ‘@angular/core‘;
 2 import {Subject}from"rxjs/Subject";
 3 @Injectable()
 4 export class CService {
 5  private outputTitle = new Subject();
 6   //订阅 
 7 //声明变量 订阅Observer
 8   output$ = this.outputTitle.asObservable();
 9 
10   //推送  调用next方法 Subject会向所有已经在其上注册的Observer多路推送 theValue 
11 
12   UpData(message:any) {
13     this.outputTitle.next(message);
14   }
15 }

 1 import { Component, OnInit ,Input, 
 2 import {CService}from"../shared/corresponded.service";//引入服务  单例模式
 3 
 4 @Component({
 5 //这里一定不要注册服务提供商 也就是不要在里面声明
 6   providers: []//不需要提供CService服务
 7    })
 8 export class HomePostsComponent implements OnInit {
 9 
10   constructor(
11               //与父组件的cs服务实例相同 是同一个实例
12               public  _CService:CService) {
13   }
14 
15 //自己业务需要在初始化的时候调用 所以就放在这里了  \
16   ngOnInit() {
17     //发送消息
18 //updata调用next方法 推送数据
19     this._CService.UpData({title:"铃铛宠物",ico:""});
20   }
21 
22 }

 1 import { Component,OnInit,AfterViewChecked,AfterViewInit} from ‘@angular/core‘;
 2 //引入服务
 3 import {CService}from"./shared/corresponded.service";
 4 @Component({
 5   //服务供应商 只在父组件使用  子组件不需要
 6   providers: [CService]
 7 })
 8 export class AppComponent implements OnInit,AfterViewChecked,AfterViewInit {
 9 //此处cs 实例和子组件的实例是一样的  都是同一个实例 
10   constructor(private CS:CService) {
11 
12   }
13 
14   //在ngAfterViewChecked每次做完组件视图和子视图的变更检测之后调用。 会执行多次
15   //ngAfterViewInit初始化完组件视图及其子视图之后调用。只调用一次
16   //订阅组件信息  只写了接收 没写发送 道理是一样的 
17   ngAfterViewInit() {
18     let that = this;
19     console.log("ngAfterViewInit");
20     this.CS.output$.subscribe((value:any)=> {
21       console.log(value);
22       that.title = value.title;
23       that.ico = value.ico;
24     })
25   }
26 
27   
28 }