在angular官方定义中，组件直接的数据交换只要在父子直接传递，但是我们在项目中经常需要在各种层级之间传递数据，下面介绍关于订阅可观察对象实现的数据传递。

首先定义一个服务app.sevice.ts，服务里面new一个SubJect对象：

// app.servie.tsimport { Injectable } from '@angular/core';import { Subject } from 'rxjs/Subject'; @Injectable()export class AppService {   constructor() { }   sub = new Subject
    
     (); }
    

然后，定义两个组件one-child和two-child在app.compnent显示：

// app.component.ts
    
    

其中，one-child里面有一个输入框，绑定keyup方法sendText:

// one-child.component.html
  one-child works! 

在one-child里面注入app.service，调用sub对象：

import { Component } from '@angular/core';import { AppService } from '../app.service' @Component({  selector: 'one-child',  templateUrl: './one-child.component.html',  styleUrls: ['./one-child.component.scss']})export class OneChildComponent {   constructor(    private appService: AppService  ) { }   sendText(value) {    console.log("one-child: " + value);    this.appService.sub.next(value);  } }

此时，在two-child里面订阅sub对象获取数据：

// two-child.component.tsimport { Component, OnInit } from '@angular/core';import { AppService } from '../app.service'  @Component({  selector: 'two-child',  templateUrl: './two-child.component.html',  styleUrls: ['./two-child.component.scss']})export class TwoChildComponent implements OnInit {    value;  constructor(    private appService: AppService  ) { }    ngOnInit() {    this.appService.sub.subscribe(res => {      this.value = res;      console.log("two-child: " + res);    })  }}

最终我们就可以看到在one-child里面输入的数据在two-child也可以接收到了：

最后的话，对于订阅对象，在组件销毁的时候，根据实际情况要取消订阅：

ngOnDestroy() {  this.appService.sub.unsubscribe();}

demo可从下面地址下载体验，下载后运行npm install：