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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
javascript每日必学之封装
Feb 23 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
小程序实现搜索框
2020/06/19 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python 实现二维列表转置
2019/12/02 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python with语句用法原理详解
2020/07/03 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
求职信的要素有哪些呢
2013/12/26 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
高三复习计划
2015/01/19 职场文书
护士年终个人总结
2015/02/13 职场文书
聘任合同书
2015/09/21 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers