Angualr 组件间通信
约定： 遵循Angular官方的说法，下文中的AngularJS代指1.x版本，Angular代指Angular2及以后的升级版本。
采用Angular（或者任意MV＊）的前端框架开发单页应用（SPA）时，我们都可能会遇见如下的场景：
A组件和B组件之前需要相互通信，或是A路由状态需要知道B路由状态的信息等等业务需求。
这个时候就需要设计到采用一套合理的通信方案来解决数据同步，数据通信的问题。
AngularJS 组件间的数据通信
在AngularJS中，也就是Angular JS 1.x版本中，我们需要实现控制器间的通信，有很多种方案，常见的有：
1. 采用 SharedService, 利用共享的公共服务来实现数据交换。
AngularJS中的Service被设计成单例的，这为这一方案，提供来底层的实现可行性，这一方案也是被广泛采用的。
2. 利用AngularJS提供的事件机制，$rootScope.$broadcast/ $scope.$emit 配合 $on 方法实现。
该方案的实现具备一定的局限性，比如：$emit方法只能向上传递事件，而不能实现向下的事件传播。但是进行合理的搭配组合已经基本够用了。
3. 利用浏览器的SessionStorage或者LocalStorage进行数据交换。
由于浏览器提供的这两类本地存储方案都提供了相应的storage事件，所以我们也可以使用该方案进行数据交换。使用该方案是应该注意及时清理无关数据。
4. 采用响应式的编程思想或者观察者模式的应用。关于这一类实现，需要经历一个编程思想的转变，之后会通过专门的文章进行记录。
5. 自身实现共享变量池。这个难度比较大，没有一定的设计能力并不推荐。
由于AngularJS并不是本文的重点，所以这里只简单的提一下。后面介绍的Angular的方案也有许多可以通用的地方。
Angular 组件间的数据通信
SharedService
共享服务方案在新的Angular中依然可以使用，而且无需额外的学习成本。这里在之前的学习笔记里有记录，不再纪录了。
SharedService 搭配 RxJS
听说 SharedService 和 RxJS 搭配更实用哦！这里的学习成本在于 RxJS ,RxJS只是 Rx思想的JS实现。这里强烈推荐学习Rx编程思想， 她的学习收益比绝对让你想象不到。
RxJS不需要我们不断的手动去SharedService中检查数据是否产生了变更，而是在数据有变化时，主动将变动的数据推送给感兴趣的任何订阅者。
举个栗子：
我们有一份随时可能会发生变动的数据存在了服务A中，在没有使用RxJS（或是类似框架／库）的情况下，我们想要知道数据的变化， 我们可能会采用轮询的机制去不断的询问服务A，我们关心的数据是否发生了变化，如果变化了就做出相应的动作。我们处于一种盲目的主动状态。
更高级一点的实现，就是我们可能把服务A实现称为一个可被观察的对象，这样我们便能通过观察服务A的状态来获取数据的变动。
现在我们来使用RxJS实现，RxJS现在可以理解为更高级的观察者模式实现。当使用来RxJS之后，在服务A中的数据发生变化时，服务A会主动 将变动的数据推送给每一个感兴趣的‘消费者'，这些消费者处于被动接受数据，自主处理数据的状态中。RxJS不同于普通观察者模式的地方在于， 它提供来一系列的数据操作方法，比如：filter， map等等。这样就便于我们更加精细的处理数据。
下面通过一段简单的示例代码来感受一下：
import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable'; @Injectable() export class DataService { private data: any; private subject: Subject<any> = new Subject<any>(); setData(data: any): void { this.data = data; this.subject.next(data); } getData(): Observable<any> { return this.subject.asObservable(); } }
上面的代码中，我们简单的实现了一个可观察的数据服务，下面我们来使用这个服务
import { Component, OnInit } from '@angular/core'; import { DataService } from './shared/Dataservice'; @Component({ moduleId: module.id, selector: '<my-component></my-component>', templateUrl: '.name.component.html', providers: [DataService] }) export class MyComponent implements OnInit { constructor(private dataService: DataService) {} ngOnInit() { // Will invoke data handler everytime // when other component use the setter this.dataService.setData() this.dataService.getData().subscribe(data => console.log(data)); } }
使用Angular底层提供的 @Input 和 @Output 装饰器来实现组件间的通信服务