原文见我的博客
组件之间的通讯是在angular2的开发中不可避免的，但是目前官方文档上介绍的很模糊，不够详细，本文将结合自己的学习和实践来把官网上父组件和子组件通过服务来通讯的实例程序进行详细的说明。
父组件和它的子组件共享同一个服务，利用该服务在家庭内部实现双向通讯，子组件中的数据的更新可以通过服务通知到其他的子组件。但是该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。这样的一个可以实现父子组件之间的通讯的服务的写法和普通的服务的写法是不同的是需要在服务中增加用于通知其他组件数据有更改的代码，这个是通过import { Subject } from ‘rxjs/Subject’来实现的。
Subject的介绍
什么是Subject？在RxJS中，Subject是一类特殊的Observable，它可以向多个Observer多路推送数值。普通的Observable并不具备多路推送的能力（每一个Observer都有自己独立的执行环境），而Subject可以共享一个执行环境。
我们看看MissionService
import{ Injectable } from'@angular/core';
import{ Subject } from'rxjs/Subject';
@Injectable()
exportclassMissionService {
//声明变量 订阅Observer，下面这个是一个可以实现组件之间通讯必不可少的
privatemissionAnnouncedSource =newSubject();
privatemissionConfirmedSource =newSubject();
missionAnnounced$ =this.missionAnnouncedSource.asObservable();
missionConfirmed$ =this.missionConfirmedSource.asObservable();
//当组件或者服务中的数据有更改的时候调用这个方法即可将更改的数据推送到其他组件。
announceMission(mission: string) {
this.missionAnnouncedSource.next(mission);
}
confirmMission(astronaut: string) {
this.missionConfirmedSource.next(astronaut);
}
}
调用Subject对象的next(theValue) 方法后，Subject会向所有已经在其上注册的Observer多路推送数据。
现在我们来看看父组件
MissionControlComponent提供服务的实例，并将其共享给它的子组件(通过providers元数据数组)，子组件可以通过构造函数将该实例注入到自身。
import{ Component } from'@angular/core';
import{ MissionService } from'./mission.service';
@Component({
selector:'mission-control',
template: `
Mission Control
Announce mission
[astronaut]="astronaut">
History
{{event}}
`,
providers: [MissionService]
})
exportclassMissionControlComponent {
astronauts = ['Lovell','Swigert','Haise'];
history: string[] = [];
missions = ['Fly to the moon!',
'Fly to mars!',
'Fly to Vegas!'];
nextMission =0;
constructor(privatemissionService: MissionService) {
missionService.missionConfirmed$.subscribe(
astronaut => {
this.history.push(`${astronaut} confirmed the mission`);
});
}
announce() {
let mission =this.missions[this.nextMission++];
this.missionService.announceMission(mission);
this.history.push(`Mission"${mission}"announced`);
if(this.nextMission >=this.missions.length) {this.nextMission =0; }
}
}
这个例子中服务的提供者在父组件中提供的，在实际的代码中可能会报错，可以将服务的提供者放到app.module.ts中。父组件中我们需要关注一点[astronaut]=”astronaut”，这个是把子组件中的变量和父组件中的变量绑定起来。这样astronaut的值在其中一个子组件中有更改的时候服务通知的时候就可以通知父组件和其他绑定了这个变量的子组件。
我们在看看子组件：
AstronautComponent也通过自己的构造函数注入该服务。由于每个AstronautComponent都是MissionControlComponent的子组件，所以它们获取到的也是父组件的这个服务实例。
import{ Component, Input, OnDestroy } from'@angular/core';
import{ MissionService } from'./mission.service';
import{ Subscription } from'rxjs/Subscription';
@Component({
selector:'my-astronaut',
template: `
{{astronaut}}: **{{mission}}**
(click)="confirm()"
[disabled]="!announced || confirmed">
Confirm
`
})
exportclassAstronautComponentimplementsOnDestroy {
@Input() astronaut: string;
mission ='';
confirmed =false;
announced =false;
subscription: Subscription;
constructor(privatemissionService: MissionService) {
//根据自己的需要看是否需要
this.subscription = missionService.missionAnnounced$.subscribe(
mission => {
this.mission = mission;
this.announced =true;
this.confirmed =false;
});
}
//这里调用很关键，必须要有
confirm() {
this.confirmed =true;
this.missionService.confirmMission(this.astronaut);
}
ngOnDestroy() {
// prevent memory leak when component destroyed
this.subscription.unsubscribe();
}
}
在这个子组件中confirm方法调用了服务中的confirmMission来通知父组件astronaut的值已经更改。注意，通过subscription服务订阅任务，并在AstronautComponent被销毁的时候退订。这是一个用于防止内存泄漏的保护措施。实际上，在这个应用程序中并没有这个风险，因为AstronautComponent的生命期和应用程序的生命期一样长。但在更复杂的应用程序环境中就不一定了。
总结：angular2父组件和子组件通过服务来通讯主要有3点
一、在服务中使用订阅来想各个组件推动数据；
二、在父组件的模板中绑定属性，父子组件中的构造函数同时使用服务参数；
三、在子组件中调用服务中的推送来推送数据更改，其他子组件可以通过ngOnChanges来检查更改然后做出相应的处理。
