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最简单的拖拽效果实现代码
Sep 24 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
微信小程序实现可长按移动控件
Nov 01 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 抽象类的简单应用
2011/09/06 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
如何使用angularJs
2017/05/08 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python 获取et和excel的版本号
2009/04/09 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
高中同学聚会邀请函
2014/01/11 职场文书
护理工作感言
2014/01/16 职场文书
《泉水》教学反思
2014/04/11 职场文书
日语专业求职信
2014/07/04 职场文书
忠诚教育心得体会
2014/09/03 职场文书
亮剑观后感
2015/06/05 职场文书
结婚仪式主持词
2015/06/29 职场文书
导游词之临安白水涧
2019/11/05 职场文书