angular2.0+ 模块之间共享service并订阅更新

1. 如何利用service共享数据
2. 本次需求 我们拥有两个组件 “ChildComponent，SecondComponent”，组件之间都有一个共同的服务“ConstService”,在“SecondComponent”改动“ConstService”中的变量，“ChildComponent”自动更新变化后的值
   3.“ConstService”服务

image.png

之前试过用“eventEmitter”想再值变动之后发射出去，但是在“ChildComponent”接受不到值的变化，通过查阅得知“eventEmitter”只适合事件绑定在子组件和父组件之间

image.png

---所以我们需要利用Rxjs的【subject】（RxJS Subject 是一种特殊类型的 Observable，它允许将值多播给多个观察者)。将值的变动发送给它的观察者

4. “childComponent”组件

   
   
   

   image.png
   
   

   --- 细心的你会发现这里有个注释 // providers: [ConstService],之前好奇把服务引入不放在app.module下面的providers[],放在单独的组件下面
   【注意】这样是不对分别在“ChildComponent，SecondComponent”各自引入自己的service这样实例出来的service就是两个不同的对象，不能使两个组件共享一个service
   订阅主要的实现就是通过subscribe（简单理解成类似于其他库或语言中的 addListener 的工作方式。）

html：模版

image.png

5. “SecondComponent”组件

html模版：

image.png

在这个组件中我用[ngModel]将service服务中的global的值和input中的值绑定在一起，通过改变input框更新service中的值

ts文件：

image.png

最终效果演示：

service.gif

                                                                                     ----引用请注明出处
                                                                                           来自 奔跑的蛙牛