angularjs2中父子组件的数据传递的实例代码


Posted in Javascript onJuly 05, 2017

父到子组件之间的数据传递

父组件模板中引用子组件

// father template: ...

  <child-item [name] = "fatherItemName" > </child-item>

//...`

其中”fatherItemName” 为父组件中的属性,[name] 为子组件的输入

在子组件中使用 @Input() name 来接受父组件传递的值

如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性

_name: string = '';

@Input()

set nameStr(name: string){

_name = "father name:" + name;

}

这时的 _name 作为临时变量,作为set 和get的中转。

父组件中:

< child-item [namestr] = “fatherItemName” >

name -> namestr

使用getter 输出

get nameStr(){ return _name; }

插值时 {{ nameStr }}

子到父组件之间的数据传递

1. 事件传值

// father template: ...

  <child-item (childEvent) = "fatherFunction($event)"> </child-item>

  //...

   export class FatherComponent{

    fatherFunction(){

     alert('hello!');

   }

  }

子组件

//...
  < p (click) = "clickThis"> click </ p>
  //...
  @Output() childEvent = new EventEmitter<boolean>();
  clickThis(){
  this.childEvent.emit();
  }

2.父组件通过局部变量获取子组件的引用

<child-item [name] = "fatherItemName" #name > </child-item>

子组件通过#绑定一个name的局部变量来访问子组件的属性

3.使用@ViewChild 获取子组件的引用

@ViewChild(ChildComponent) child: ChildComponent;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
js 分栏效果实现代码
Aug 29 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 #Javascript
微信小程序学习之数据处理详解
Jul 05 #Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 #Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 #Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
You might like
十天学会php之第八天
2006/10/09 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
在windows系统中实现python3安装lxml
2016/03/23 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
python 制作磁力搜索工具
2021/03/04 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
技术总监岗位职责
2013/12/05 职场文书
村干部承诺书
2014/03/28 职场文书
群众路线调研报告范文
2014/11/03 职场文书
邀请书模板
2015/02/02 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
在Docker容器中部署SQL Server
2022/04/11 Servers