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 相关文章推荐
图片之间的切换
Jun 26 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
javascript运动详解
Jul 06 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
python中__call__方法示例分析
2014/10/11 Python
python中pass语句用法实例分析
2015/04/30 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
施工安全汇报材料
2014/08/17 职场文书
云台山导游词
2015/02/03 职场文书
公司财务管理制度
2015/08/04 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server