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