工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下

rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/open1462525661610.html

以下是服务代码

 1 import { Injectable } from '@angular/core';
 2 import {Subject}from"rxjs/Subject";
 3 @Injectable()
 4 export class CService {
 5  private outputTitle = new Subject();
 6   //订阅
 7 //声明变量 订阅Observer
 8   output$ = this.outputTitle.asObservable();
 9
10   //推送  调用next方法 Subject会向所有已经在其上注册的Observer多路推送 theValue
11
12   UpData(message:any) {
13     this.outputTitle.next(message);
14   }
15 }

以下是子组件中的代码 节选

 1 import { Component, OnInit ,Input,
 2 import {CService}from"../shared/corresponded.service";//引入服务  单例模式
 3
 4 @Component({
 5 //这里一定不要注册服务提供商 也就是不要在里面声明
 6   providers: []//不需要提供CService服务
 7    })
 8 export class HomePostsComponent implements OnInit {
 9
10   constructor(
11               //与父组件的cs服务实例相同 是同一个实例
12               public  _CService:CService) {
13   }
14
15 //自己业务需要在初始化的时候调用 所以就放在这里了  \
16   ngOnInit() {
17     //发送消息
18 //updata调用next方法 推送数据
19     this._CService.UpData({title:"铃铛宠物",ico:""});
20   }
21
22 }

以下是父组件代码 节选

 1 import { Component,OnInit,AfterViewChecked,AfterViewInit} from '@angular/core';
 2 //引入服务
 3 import {CService}from"./shared/corresponded.service";
 4 @Component({
 5   //服务供应商 只在父组件使用  子组件不需要
 6   providers: [CService]
 7 })
 8 export class AppComponent implements OnInit,AfterViewChecked,AfterViewInit {
 9 //此处cs 实例和子组件的实例是一样的  都是同一个实例
10   constructor(private CS:CService) {
11
12   }
13
14   //在ngAfterViewChecked每次做完组件视图和子视图的变更检测之后调用。 会执行多次
15   //ngAfterViewInit初始化完组件视图及其子视图之后调用。只调用一次
16   //订阅组件信息  只写了接收 没写发送 道理是一样的
17   ngAfterViewInit() {
18     let that = this;
19     console.log("ngAfterViewInit");
20     this.CS.output$.subscribe((value:any)=> {
21       console.log(value);
22       that.title = value.title;
23       that.ico = value.ico;
24     })
25   }
26
27
28 }

整个通信流程 核心就是单例  只有一个服务的实例  目前就这么多了  不明白的留言交流吧

转载于:https://www.cnblogs.com/yhweb/p/yh-ng2.html

angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2相关推荐

  1. angularjs组件间通讯_详解Angular2组件之间如何通信

    组件之间的共享可以有好几种方式 父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selecto ...

  2. 变革时代 国内通讯云服务厂商对比介绍

    变革时代 国内通讯云服务厂商对比介绍 责任编辑:editor006 |  2014-09-22 17:31:13本文摘自:CSDN 这是一个云计算的时代. 这是一个互联网的时代. 这是一个分工合作,快 ...

  3. Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析

    前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...

  4. bus.js非父子组件之间通讯

    bus.js非父子组件之间通讯 区别: bus.js就是一个公共的vue实例专门处理emit和on事件. vuex.js是做全局数据处理的,是指限定了对公共数据的使用处理方法,统一管控 vue中非父子 ...

  5. Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯

    目录 一.父传子 1.props 属性传递 2.方法传递 3. $parent获取方法和属性 二.子传父 1. 属性传递 2 .通过$refs主动获取子组件方法和属性 3 .通过$children主动 ...

  6. Vue中同级组件之间的通讯方法(详解)

    比如我想在userVue.vue中调用headVue中的方法 1.首先先创建一个avatarRealTime.js,来打开组件之间的通讯接口 avatarRealTime中代码如下:引入vue,暴露出 ...

  7. Exchange 2010 RPC配置静态RPC端口客户端访问、通讯簿服务和公用文件夹连接

    Exchange 2010 RPC客户端访问.通讯簿服务和公用文件夹连接配置静态RPC端口 很多企业的邮件服务器都采用了微软的Exchange,而Exchange的客户端访问服务通过动态RPC端口来实 ...

  8. 基于订阅的服务通讯架构体系

    说到订阅服务通讯一般都会想到基于队列的消息生产和消费模式,这也是在实际应该中比较常用的方式.一般生产者把消息发送到队列服务中心,然后消费者去中心订阅:然而这种方式需要一个消息服务中心,而在这里所说的订 ...

  9. vue.js组件之j间的通讯一 子组件接受父祖件数据

    Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...

最新文章

  1. redhat和ubuntu上部署本地源
  2. 数据库系统原理(第6章:数据库安全与保护)
  3. 琥珀项目:较小的,面向生产力的Java语言功能
  4. Python 程序 运行过程
  5. 开源词法分析工具LAC重大升级!打造属于自己的个性化分词器!
  6. 【IT】一些有用的链接和操作
  7. Kafka核心概念及核心机制
  8. vc6.0转vc2010编程中遇到的问题
  9. linux安全检查与加固报告,linux安全加固文档分析.doc
  10. 深入浅出MFC:《深入浅出MFC》入手基础指南
  11. 未能成功加载扩展程序_该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的解决办法...
  12. sendgrid html text,包括里面sendgrid鄂麦邮件的内容我的HTML代码
  13. 背包九讲之一:01背包问题
  14. itools安装驱动组件失败解决办法,实测有效
  15. uniapp 开发视频解析app
  16. 面试题:一头牛重800公斤,一座桥承重700公斤,牛应该怎么过桥
  17. 中国不仅在液晶面板市场超越韩国,在先进面板技术上也发起了挑战
  18. 人脸识别12-人脸搜索(安防应用)
  19. 奥哲低代码助力西子联合自主搭建航空QMS
  20. 如何逃出教育的死亡谷-Ken Robinson Ted英语演讲

热门文章

  1. Spring IOC(控制反转)详解及示例
  2. 开放地址法实现HashTable
  3. 一道面试题,想明白之后好像锤自己几下~~
  4. C#让两个长度相同的数组一一对应
  5. LiquidCrystal库函数
  6. IIS不能下载.apk文件
  7. java二维码生成与解析代码实现
  8. nginx重写rewrite的[emerg] unknown directive
  9. Struts2学习8--文件上传(多个文件上传)
  10. Ecshop后台流量分析--地区分布的地名全是乱码