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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js 函数调用模式小结
Dec 26 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Less 安装及基本用法
2018/05/05 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
数据库面试要点基本概念
2013/10/31 面试题
金融专业个人的自我评价
2013/10/18 职场文书
运动会稿件100字
2014/02/21 职场文书
事业单位鉴定材料
2014/05/25 职场文书
工地安全质量标语
2014/06/07 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
教学副校长工作总结
2015/08/13 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python