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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
理解JS事件循环
Jan 07 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
jQuery插件之validation插件
Mar 29 jQuery
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
微信小程序实现倒计时功能
Nov 19 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python语言描述最大连续子序列和
2017/12/05 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
HTML5标签小集
2011/08/02 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
农行实习自我鉴定
2013/09/22 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
商务主管岗位职责
2013/12/08 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Python语言内置数据类型
2022/02/24 Python
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python