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

2018-09-05 10:23:16 浏览数 (1)

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

image.png

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

image.png

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

  1. “childComponent”组件

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

html:模版

image.png

  1. “SecondComponent”组件

html模版:

image.png

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

ts文件:

image.png

最终效果演示:

service.gif

代码语言:javascript复制
                                                                                     ----引用请注明出处
                                                                                           来自 奔跑的蛙牛 

0 人点赞