Angular2数据绑定详解
大致介绍
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')); }
浏览器的显示:
可以看到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的值,是组件类 -> 模板
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: AngularJS实用基础知识_入门必备篇(推荐)
下一篇: 数据库数据转换成JSON格式实例详解