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实现的分页插件pagenav
Aug 28 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
微信小程序实现弹框效果
May 26 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python实现神经网络感知器算法
2017/12/20 Python
scrapy爬虫实例分享
2017/12/28 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
django创建css文件夹的具体方法
2020/07/31 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
单位领导证婚词
2014/01/14 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
新闻报道稿范文
2015/07/23 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL