- 如何利用service共享數(shù)據(jù)
- 本次需求 我們擁有兩個(gè)組件 “ChildComponent怀浆，SecondComponent”逐样，組件之間都有一個(gè)共同的服務(wù)“ConstService”,在“SecondComponent”改動(dòng)“ConstService”中的變量盲赊，“ChildComponent”自動(dòng)更新變化后的值
3.“ConstService”服務(wù)
image.png
之前試過用“eventEmitter”想再值變動(dòng)之后發(fā)射出去碟渺，但是在“ChildComponent”接受不到值的變化叔扼，通過查閱得知“eventEmitter”只適合事件綁定在子組件和父組件之間
image.png
---所以我們需要利用Rxjs的【subject】（RxJS Subject 是一種特殊類型的 Observable览徒，它允許將值多播給多個(gè)觀察者)狈定。將值的變動(dòng)發(fā)送給它的觀察者
-
“childComponent”組件
image.png
--- 細(xì)心的你會(huì)發(fā)現(xiàn)這里有個(gè)注釋 // providers: [ConstService],之前好奇把服務(wù)引入不放在app.module下面的providers[],放在單獨(dú)的組件下面
【注意】這樣是不對(duì)分別在“ChildComponent，SecondComponent”各自引入自己的service這樣實(shí)例出來的service就是兩個(gè)不同的對(duì)象习蓬，不能使兩個(gè)組件共享一個(gè)service
訂閱主要的實(shí)現(xiàn)就是通過subscribe（簡(jiǎn)單理解成類似于其他庫(kù)或語言中的 addListener 的工作方式纽什。）
html：模版
image.png
- “SecondComponent”組件
html模版：
image.png
在這個(gè)組件中我用[ngModel]將service服務(wù)中的global的值和input中的值綁定在一起，通過改變input框更新service中的值
ts文件：
image.png
最終效果演示：
service.gif
----引用請(qǐng)注明出處
來自 奔跑的蛙牛
