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 和 Java 的区别浅析
Jul 31 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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中神奇的fastcgi_finish_request
2011/05/02 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python交互环境下实现输入代码
2018/06/22 Python
浅析Python函数式编程
2018/10/06 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Python logging设置和logger解析
2019/08/28 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
国家助学金获奖感言
2014/01/31 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
辞职信范文大全
2015/03/02 职场文书
聘任书格式及范文
2015/09/21 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js