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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
微信小程序教程系列之设置标题栏和导航栏(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
一个好用的分页函数
2006/11/16 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php 文章调用类代码
2011/08/11 PHP
php在线代理转向代码
2012/05/05 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
mac系统安装Python3初体验
2018/01/02 Python
python实现求特征选择的信息增益
2018/12/18 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
应届生程序员求职信
2013/11/05 职场文书
给物业的表扬信
2014/01/21 职场文书
医药销售自荐书
2014/05/29 职场文书
作风建设整改方案
2014/10/27 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Python编写冷笑话生成器
2022/04/20 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python