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 相关文章推荐
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
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
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
深入理解PHP内核(一)
2015/11/10 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
jQuery中map()方法用法实例
2015/01/06 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
JS实现电商放大镜效果
2017/08/24 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
Python max内置函数详细介绍
2016/11/17 Python
Python使用剪切板的方法
2017/06/06 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
美食节策划方案
2014/05/26 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript