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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python 实现简易的记事本
2020/11/30 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
企业文化标语大全
2014/06/10 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
公司出差管理制度范本
2015/08/05 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript