Angular 2父子组件之间共享服务通信的实现


Posted in Javascript onJuly 04, 2017

前言

如今的前端开发,都朝组件式开发模式靠拢,如果使用目前最流行的前端框架Angular和React开发应用,不可避免地需要开发组件,也就意味着我们需要考虑组件间的数据传递等问题,不过Angular 2已经为我们提供了很好的解决方案。

本文详细介绍了Angular2父子组件共享服务通信的相关内容,父子组件共享同一个服务,利用该服务实现双向通信,下面来看看详细的介绍:

第一步:定义服务

parentService.ts

Angular 2父子组件之间共享服务通信的实现

1).这里用Injectable修饰这个类是一个服务,在其他用到地方只需要注入使用

(2).我们还定义了一个name变量并且初始化值,和一个公共的方法getData

parent.module.ts

Angular 2父子组件之间共享服务通信的实现

我们这里把刚才创建的parentService服务依赖加进来,接着在provides中注册这个parentService服务,在ParentModule模块中注册之后,对于父组件和子组件来说都是指向同一个服务实例,而且这个服务的作用域只在当前这个模块中有效,这句话理解了,就等于理解了父子组件共享服务实现数据通信

在父组件中使用服务

parent.component.ts

Angular 2父子组件之间共享服务通信的实现

导入parentService服务,在构造函数中声明注入parentService服务,因为我们在parentModule模块中,已经将parentService 通过provides注册过,所以我们在组件中不需要进行注册,直接可以使用,你可以这样理解,把当它想象成在模块的容器中已经存在了,只需要从容器中拿出来使用。

(1).这里我们定义了一个OnClick()方法,当页面点击事件触发,就会来调用parentService服务定义的方法getData()获取返回值,弹出返回值。

对应的父组件模版

Angular 2父子组件之间共享服务通信的实现

在子组件中使用服务

因为共享的是同一个ParentService服务实例,所以我们在子组件中也可以调用个ParentService服务的方法,代码同上面用一样

childen.component.ts

Angular 2父子组件之间共享服务通信的实现 

这里同样定义了一个方法,用于测试调用parentService服务,代码实现跟上面一样,不在描述,

对应的子组件模版

Angular 2父子组件之间共享服务通信的实现 

最终效果:

Angular 2父子组件之间共享服务通信的实现

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
基于Bootstrap表单验证功能
Nov 17 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 #Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 #Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
JS实现给json数组动态赋值的方法示例
Mar 19 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP脚本的10个技巧(4)
2006/10/09 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php 地区分类排序算法
2013/07/01 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
调试php程序的简单步骤
2019/10/04 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
jquery 插件学习(四)
2012/08/06 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python实战之制作天气查询软件
2019/05/14 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
共产党员公开承诺书
2014/03/25 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
布达拉宫导游词
2015/02/02 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
宾馆客房管理制度
2015/08/06 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技