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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JS原型与继承操作示例
May 09 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
JS实现简易图片自动轮播
Oct 16 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
自制PHP框架之设计模式
2017/05/07 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python爬豆瓣电影实例
2018/02/23 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python操作excel让工作自动化
2019/08/09 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python urllib2运行过程原理解析
2020/06/04 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
化妆品店促销方案
2014/02/24 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2016年元旦寄语
2015/08/17 职场文书
护理心得体会范文
2016/01/22 职场文书