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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python有参函数使用代码实例
2020/01/06 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
《最可爱的人》教学反思
2014/02/14 职场文书
浪费资源的建议书
2014/03/12 职场文书
中学生评语大全
2014/04/18 职场文书
班级年度安全计划书
2014/05/01 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
初中运动会前导词
2015/07/20 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Django路由层如何获取正确的url
2021/07/15 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
python数字图像处理:图像简单滤波
2022/06/28 Python