angular--数据绑定

数据绑定几种语法：

<h1>{{name}}</h1> 
使用插值表达式将一个表达式的值显示在模板上

<img [src] = "url"/>
 使用方括号将HTML标签的一个属性绑定到一个表达式上。

<button (click)= "toSomeThing($event)"/>按钮</button>
使用小括号将组件控制器的一个方法绑定到模板上的一个事件处理器上。

事件绑定：

<input (input)="onInputEvent($event)"/>

image.png

属性绑定和插值绑定是一样的：

<img [src]="url">
<img src="{{url}}">

HTML属性和DOM属性的关系：

1：少量HTML属性后台DOM属性之前有着1:1的映射，如id。
2：有些HTML属性没有对应的DOM属性，如colspan。
3：有些DOM属性没有对应的HTML属性，如textContent。
4：就算名字相同，HTML属性和DOM属性也不是同一样东西。
5：HTML属性的值指定了初始值；DOM属性的值表示当前的值。DOM属性的值可以改变；HTML属性的值不能改变。
6：模板绑定是通过DOM属性和事件来工作的，而不是HTML属性

HTML属性绑定：

1：基本HTML属性绑定：attr

<td [attr.colspan]="tableColspan"></td>

2：CSS类绑定：

<div class="aa bb" [class]="cc">something</div> cc class会完全替换掉aa和bb 两个class
<div class="bb" [class.aa]="isAa">something</div> 如果isAa为true，则会追加到原来的class中
<div [ngClass]="{aa:isAa, bb:isBb}">something</div> isAa 为true，则显示aa，否则，则不显示

3：样式绑定：

<div  [style.color]="isTrue ? 'red':'blue' ">something</div> 
<div  [style.font-size.em]="isTrue ? 1:4 ">something</div> 
<div [ngStyle]="{'font-size':this.canSave?'normal':'blod'}">something</div> 

双向绑定：

<input [(ngModel)] = "name"/> 箱子里装着香蕉