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 相关文章推荐
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
小程序关于请求同步的总结
May 05 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
多重?l件?合查?(二)
2006/10/09 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
python ElementTree 基本读操作示例
2009/04/09 Python
用Python编写web API的教程
2015/04/30 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python中树与树的表示知识点总结
2019/09/14 Python
Python list运算操作代码实例解析
2020/01/20 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python元组拆包实现方法
2021/02/28 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
信息技术培训感言
2014/03/06 职场文书
离职证明格式样本
2015/06/12 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python