angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到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相关推荐
- angularjs组件间通讯_详解Angular2组件之间如何通信
组件之间的共享可以有好几种方式 父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selecto ...
- 变革时代 国内通讯云服务厂商对比介绍
变革时代 国内通讯云服务厂商对比介绍 责任编辑:editor006 | 2014-09-22 17:31:13本文摘自:CSDN 这是一个云计算的时代. 这是一个互联网的时代. 这是一个分工合作,快 ...
- Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析
前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...
- bus.js非父子组件之间通讯
bus.js非父子组件之间通讯 区别: bus.js就是一个公共的vue实例专门处理emit和on事件. vuex.js是做全局数据处理的,是指限定了对公共数据的使用处理方法,统一管控 vue中非父子 ...
- Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯
目录 一.父传子 1.props 属性传递 2.方法传递 3. $parent获取方法和属性 二.子传父 1. 属性传递 2 .通过$refs主动获取子组件方法和属性 3 .通过$children主动 ...
- Vue中同级组件之间的通讯方法(详解)
比如我想在userVue.vue中调用headVue中的方法 1.首先先创建一个avatarRealTime.js,来打开组件之间的通讯接口 avatarRealTime中代码如下:引入vue,暴露出 ...
- Exchange 2010 RPC配置静态RPC端口客户端访问、通讯簿服务和公用文件夹连接
Exchange 2010 RPC客户端访问.通讯簿服务和公用文件夹连接配置静态RPC端口 很多企业的邮件服务器都采用了微软的Exchange,而Exchange的客户端访问服务通过动态RPC端口来实 ...
- 基于订阅的服务通讯架构体系
说到订阅服务通讯一般都会想到基于队列的消息生产和消费模式,这也是在实际应该中比较常用的方式.一般生产者把消息发送到队列服务中心,然后消费者去中心订阅:然而这种方式需要一个消息服务中心,而在这里所说的订 ...
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
最新文章
- redhat和ubuntu上部署本地源
- 数据库系统原理(第6章:数据库安全与保护)
- 琥珀项目:较小的,面向生产力的Java语言功能
- Python 程序 运行过程
- 开源词法分析工具LAC重大升级!打造属于自己的个性化分词器!
- 【IT】一些有用的链接和操作
- Kafka核心概念及核心机制
- vc6.0转vc2010编程中遇到的问题
- linux安全检查与加固报告,linux安全加固文档分析.doc
- 深入浅出MFC:《深入浅出MFC》入手基础指南
- 未能成功加载扩展程序_该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的解决办法...
- sendgrid html text,包括里面sendgrid鄂麦邮件的内容我的HTML代码
- 背包九讲之一:01背包问题
- itools安装驱动组件失败解决办法,实测有效
- uniapp 开发视频解析app
- 面试题:一头牛重800公斤,一座桥承重700公斤,牛应该怎么过桥
- 中国不仅在液晶面板市场超越韩国,在先进面板技术上也发起了挑战
- 人脸识别12-人脸搜索(安防应用)
- 奥哲低代码助力西子联合自主搭建航空QMS
- 如何逃出教育的死亡谷-Ken Robinson Ted英语演讲