angular2.0+ 模块之间共享service并订阅更新
2017-11-07 本文已影响1971人
奔跑的蛙牛
- 如何利用service共享数据
- 本次需求 我们拥有两个组件 “ChildComponent，SecondComponent”，组件之间都有一个共同的服务“ConstService”,在“SecondComponent”改动“ConstService”中的变量，“ChildComponent”自动更新变化后的值
3.“ConstService”服务
image.png
之前试过用“eventEmitter”想再值变动之后发射出去，但是在“ChildComponent”接受不到值的变化，通过查阅得知“eventEmitter”只适合事件绑定在子组件和父组件之间
image.png
---所以我们需要利用Rxjs的【subject】（RxJS Subject 是一种特殊类型的 Observable，它允许将值多播给多个观察者)。将值的变动发送给它的观察者
-
“childComponent”组件
image.png
--- 细心的你会发现这里有个注释 // providers: [ConstService],之前好奇把服务引入不放在app.module下面的providers[],放在单独的组件下面
【注意】这样是不对分别在“ChildComponent，SecondComponent”各自引入自己的service这样实例出来的service就是两个不同的对象，不能使两个组件共享一个service
订阅主要的实现就是通过subscribe（简单理解成类似于其他库或语言中的 addListener 的工作方式。）
html：模版
image.png
- “SecondComponent”组件
html模版：
image.png
在这个组件中我用[ngModel]将service服务中的global的值和input中的值绑定在一起，通过改变input框更新service中的值
ts文件：
image.png
最终效果演示：
service.gif
----引用请注明出处
来自 奔跑的蛙牛
