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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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中的一些常用函数收集
2015/05/26 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python3内置模块random随机方法小结
2019/07/13 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
安全教育心得体会
2013/12/29 职场文书
房产委托公证书样本
2014/04/04 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
用Python实现Newton插值法
2021/04/17 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
一文读懂navicat for mysql基础知识
2021/05/31 MySQL