Angular2数据绑定详解


Posted in Javascript onApril 18, 2017

大致介绍

Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为:

1、属性绑定和插值表达式 组件类-> 模板

2、事件绑定:模板 -> 组件类

3、双向绑定: 模板 <-> 组件类

事件绑定

事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是:

<p>
 <a (click)="doClick($event)">点我</a>
</p>

(click)表示要进行的操作,当用户点击时就会执行组件类中的doClick方法

export class BindComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }

 doClick(event: any){
  console.log(event.target.innertext);
 }
}

属性绑定和插值表达式

其实属性绑定和插值表达式是同一个东西,因为在解析代码时,插值表达式会转换为属性绑定,所以你想用哪个就用哪个

下面的代码作用都是一样的

<!-- 插值表达式 -->
<img src="{{imgUrl}}" />

<!-- 属性绑定 -->
<img [src]="imgUrl" />

属性绑定又分为HTML属性绑定和DOM属性绑定,他们之间的区别是什么?先来看一个例子

<input type="text" value="hello" (input)="doInput($event)" />

doInput(event: any){
  console.log(event.target.value);
  console.log(event.target.getAttribute('value'));
 }

浏览器的显示:

Angular2数据绑定详解

可以看到event.target.value是获取的DOM属性,是可变的。表示当前元素的状态

而event.target.getAttribute("value")获取的是HTML属性,是不可变的。只负责初始化HTML元素,不可改变

注意:

1、有些DOM属性没有映射的HTML属性,同样有些HTML属性也没有映射的DOM属性

2、模板绑定的是DOM属性

HTML属性绑定

1、基本HTML属性绑定

<td [attr.colspan]="表达式"></td>

2、css绑定

<div class="a" [class]="b"></div> //b会完全替代a
<div [class.a]="fn()"></div> //fn()返回true,false,如果true添加.a
<div [ngClass]="{a:isA,b:isB}"></div> //b会完全替代a

3、样式绑定

<button [style.color]="a?red:green">button</button>
<button [ngStyle]="{'font-style':a?'red':'green'}">button</button>

双向绑定

双向绑定可以从组件类 -> 模板,也可以从模板 -> 组件类

例子:

<input type="text" [(ngModel)]="name" (input)="doInput()" />

private name: string = 'asdf';
 
 doInput(){
  setInterval(() => {
   this.name = 'sdf';
  },3000);
 }

利用[(ngModel)]可以实现双向数据绑定,首先在输入框中修改name,从而改变组件类中name的值,是模板组  -> 件类,修改值之后三秒,又重新设置name的值,是组件类 -> 模板

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
validator验证控件使用代码
Nov 23 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
vue实现购物车结算功能
Jun 18 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 #Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 #Javascript
JavaScript实现前端实时搜索功能
Mar 26 #Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 #Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 #Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 #Javascript
微信小程序实战之轮播图(3)
Apr 17 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP count()函数讲解
2019/02/03 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
基于python指定包的安装路径方法
2018/10/27 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python实现桌面气泡提示功能
2019/07/29 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
人事专员岗位职责范本
2014/03/04 职场文书
授权委托书怎么写
2014/04/03 职场文书
趣味运动会广播稿
2015/08/19 职场文书
python中print格式化输出的问题
2021/04/16 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis