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.Encode手动解码技巧
Jul 14 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
单元选择合并变色示例代码
May 26 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
JS常见算法详解
Feb 28 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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
php获取后台Job管理的实现代码
2011/06/10 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
Jquery 扩展方法
2010/05/06 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2014/09/01 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Python 从attribute到property详解
2020/03/05 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
求职信需要的五点内容
2014/02/01 职场文书
《母鸡》教学反思
2014/02/25 职场文书
五一促销活动总结
2014/07/01 职场文书
教师个人学习总结
2015/02/11 职场文书
医院员工辞职信范文
2015/05/12 职场文书
化验室安全管理制度
2015/08/06 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS