Angular的数据绑定分为三种:
< h1> {{变量名}} </h1>
:插值表达式(单向绑定)< img [src]="imgUrl">
:属性绑定<button (click)="toPrduct($event)">
: 事件绑定($event是一个事件变量)
下面我们来详细讲解一下:
1、插值表达式很简单,我做一个简单的介绍:
插值表达式是一个dom属性绑定,所有只能绑定dom属性,其他属性不能使用dom属性绑定。
2、属性绑定
2.1、
< img [src]="imgUrl">
< img src="{{imgUrl}}">
这两种写法没有任何的区别。
2.2、DOM属性、HTML属性是不一样的,
优先选择DOM属性绑定。
- DOM属性:节点的当前值
- HTML属性:初始化时的值
在ts中获取属性的方法也不一样:
//Dom属性的获取(value属性的获取)
event.target.value;
//HTML属性的获取(value属性的获取)
event.target.getAttribute('value');
2.3、HTML属性绑定的三大方法
//基本的属性绑定
< img [attr.属性名]="属性的值">`
//css类绑定
<img class="aa bb" [class]="cc">`
//使用cc来完全替换aa bb
<img [class.aa]="isSpecial">`
//当isSpecial=ture时,添加class aa到img上
<img [ngClass]="{aa:isAA,bb:isBB}">
//样式绑定
<img [style.color]="isSpecial?red:green">
//是一个表达式形式的这个值,当isSpecial=ture时,为red,反之为:green
<img [ngStyle]="{'color':this.isSpecial?'red':'gren'}">
//也是一个表达式:当isSpecial=ture时,为red,反之为:green
3、双向绑定
<input [(ngModel)]="name">`
双向绑定需要在主模块添加:FormsMudule 模块