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截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
es6函数中的作用域实例分析
Apr 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 微信支付类 demo
2015/11/30 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Python实现线程池代码分享
2015/06/21 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
Python调用C语言的实现
2019/07/26 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
keras打印loss对权重的导数方式
2020/06/10 Python
python温度转换华氏温度实现代码
2020/12/06 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
工作所在部门证明
2014/09/21 职场文书
骨干教师事迹材料
2014/12/17 职场文书
捐资助学感谢信
2015/01/21 职场文书
军训新闻稿范文
2015/07/17 职场文书
oracle索引总结
2021/09/25 Oracle
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript