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,它允许将值多播给多个观察者)。将值的变动发送给它的观察者

  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
                                                                                     ----引用请注明出处
                                                                                           来自 奔跑的蛙牛 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、安装最新版本的 nodejs 注意:请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验...
    liuguangsen阅读 2,128评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 第一节:初识Angular-CLI第二节:登录组件的构建第三节:建立一个待办事项应用第四节:进化!模块化你的应用第...
    接灰的电子产品阅读 15,650评论 31 77
  • 组件基础 组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。组件是angular应用的最小逻辑单...
    oWSQo阅读 1,397评论 0 0
  • 她呢~ 就是我的麻麻 我一直以为她是一个没办法理喻的一个人,有的时候想法偏激,每一次来北京看我的时候,我们每在同一...
    没错我就是奥特曼阅读 532评论 0 49