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中创建对象的几种方式示例介绍
Jan 26 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 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
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python实现梯度下降法
2020/03/24 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
生产部管理制度
2014/01/31 职场文书
授权委托书
2014/09/17 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android