Angularjs2不同组件间的通信实例代码


Posted in Javascript onMay 06, 2017

AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值

/**
 *1.定义一个服务,作为传递参数的媒介
 */
@Injectable()
export class PrepService{
 //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法  
 profileInfo: any;
 }
 /**
 *2.传递参数的组件,我这边简单演示,直接就在构造器里面实现传参了
 */ 
@Component({
 selector: 'XXXXXXX',
 templateUrl:"./XXXXXX.html",
 styleUrls:["./XXXXXXX.css"]
})
export class ReportComponent {
 //定义要传递的参数(此处是一个对象,也可以是方法)    
 reponsePrep:any ={
  name : "腊肉豆皮",
  address:"中欧五花肉"
 }
 //构造器注入PrepService服务  
 constructor(private ps:PrepService){
  //把当前组件参数赋值给PrepService的profileInfo属性
  ps.profileInfo = this.reponsePrep;
 }
 }
 /**
 *3.接受参数的组件
 */ 
@Component({
 selector: 'YYYYYY',
 templateUrl:"./YYYYYYYY.html",
 styleUrls:["./YYYYYYY.css"]
})
export class commandComponent {
 //定义参来接收来自PrepService服务profileInfo属性的值
 requestPrep:any; 
 //构造器注入PrepService服务  
 constructor(private ps:PrepService){
  //把PrepService的profileInfo属性的值赋值给requestPrep实现组件的之间的传值
  this.requestPrep = ps.profileInfo;
 }
 }

思路:定义一个服务作为传递参数的媒介注入在要传参的组件的构造器里面,然后对服务里面属性(传参媒介)来赋值和取值实现组件之间的传参。

以上所述是小编给大家介绍的Angularjs2不同组件间的通信实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
javascript比较文档位置
Apr 08 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js中replace的用法总结
Dec 27 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
详解node HTTP请求客户端 - Request
May 05 #Javascript
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
JavaScript仿微信打飞机游戏
Jul 05 #Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 #Javascript
You might like
第十二节--类的自动加载
2006/11/16 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
python中的随机函数random的用法示例
2018/01/27 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
python动态规划算法实例详解
2020/11/22 Python
简单的JAVA编程面试题
2013/03/19 面试题
自我评价个人范文
2013/12/16 职场文书
日语求职信范文
2013/12/17 职场文书
党课学习思想汇报
2014/01/02 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
抢劫罪辩护词
2015/05/21 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
MySQL的存储过程和相关函数
2022/04/26 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
python playwright之元素定位示例详解
2022/07/23 Python