angular数据绑定

angular提供了多种数据绑定的方式，根据数据流动的方向分为三种，
1.数据流向：单向（从数据源到视图目标（属性绑定））
示例：

            <p>{{detail.telNum}}</p> 
            <div [title]="name">hello world</div>
            <div [style.color]="color">hello world</div>

绑定类型：插值、dom元素属性绑定、html标签特性绑定。
2.数据流向：单向（从视图目标到数据源（事件绑定））
示例：(click)="editContact()"
绑定类型：事件绑定
3.双向
示例：<div [(title)]="name"></div>
绑定类型：双向绑定
等号左边的称为绑定目标，右边的称为绑定源。
先理解一组概念：
DOM对象的属性（property）：以dom元素为对象，其附加的内容是在文档对象模型里定义的。HTML标签特性（Attribute）：dom节点自带的属性。
通常html标签特性代表初始值，初始化后就不再改变，而dom对象属性代表着当前值，默认为初始值，但会随着属性值的变化而变化。
一、插值
使用双大括号的语法{{}}，双大括号中可以是变量名、合法的模板表达式、或者是宿主组件的函数。
例如

<p>512+512 = {{512+512}}
<p>{{detail.getName()}}</p>

注：模板表达式：应用在属性绑定“=”右侧的引号中或者插值表达式的双大括号中。模板表达式不能引用任何全局命名空间中的成员。
二、

DOM元素属性绑定：将元素的属性绑定到组件的属性上

<div [title]="titleText">hello world</div>

title为绑定目标，可以使用bind-前缀的形式来实现属性绑定。

<div bind-title="titleText">hello world</div>

在属性绑定中，中括号的作用：“=”左侧中括号的作用是让angular执行“=”右侧的模板表达式，并将结果赋值给该目标属性。如果没有中括号，angular会把“=”右侧的模板表达式当作一个字符串常量，而不会计算该字符串。

html标签特性绑定

angular推荐使用dom元素属性绑定，但是当元素没有对应的属性的时候，可以使用html标签特性绑定来设置值。

<table border=1>
    <tr><td colspan="{{1+2}}">合并单元格</td></tr>
</table>

上面的例子会出现一个模板解析错误，因为colspan在<td>元素中并不是DOM元素属性，而是HTML标签特性。插值和属性绑定只能设置DOM元素属性，不能设置HTML标签特性。
HTML标签特性绑定在语法上类似于属性绑定，但是中括号中的部分不是一个元素的属性名，而是由attr .前缀和HTML标签特性名称组成的形式，然后通过一个模板表达式来设置HTML标签特性的值。

<table border=1>
      <tr><td [attr.colspan]="{{1+2}}">合并单元格</td></tr>
</table>

css类绑定

CSS类既属于HTML标签特性，又属于DOM对象特性，所以可以使用属性绑定和特性绑定来完成绑定。
例如：

<div class="font14">14号红色字体</div>
<div class="red font14" [class]="changeGreen">14号绿色字</div>

angular为css类属性还提供了特有的绑定方式，既使用类似于[class.class-name]的语法形式来完成属性绑定----当被赋值为true时，将class-name这个类的添加到该绑定的标签上，否则移除这个类。
例如：

<div [class.color-blue]="isBlue()">当isBlue()返回true时，这里的字体变成蓝色</div>

style样式绑定

HTML标签内联样式可以通过Style样式绑定的方式来设置，样式绑定在语法上使用如[style.style-property]的写法。
示例代码如下：

<button [style.background-color]="canClick ? blue:red"></button>
若canClick为true，则按钮的背景色变为蓝色。

在设置内联样式的时候也可以带上样式单位，如%或px
<button [style.font-size.px]="canClick ? 100:50"></button>
<button [style.width.%]="canClick ? 100:50"></button>

属性绑定和插值的关系
属性绑定和插值都能实现数据绑定

<div>hello world <i>{{username}}</i></div>
<div>hello world <i [innerHTML]="username"></i></div>

在渲染试图之前，angular会将插值表达式转换成属性绑定的形式，它只是属性绑定的一种语法糖。
三、事件绑定
事件绑定也是一种但想数据绑定形式，数据从模板流向组件，事件绑定的语法是由“=”左侧小括号中的目标事件和“=”右侧引号中的模板语句组成。
例如

<a class="edit" (click)="editContact()">编辑</a>

模板语句
模板语句和模板表达式一样，只能访问其上下文环境中的成员，模板语句的上下文环境就是绑定事件对应组件的实例，模板语句的上下文也可以包含组件之外的对象，如模板局部变量很多事件绑定中的$event。
$event事件
可以通过$event事件对象来获取事件的相关信息，目标事件可以是dom元素事件，也可以是自定义事件。若目标元素是原生的dom元素事件，则$event将是一个包含target和target.value属性的dom事件对象。
四、双向数据绑定
在angular中可以使用[()]语法实现双向数据绑定。
<input [(ngModel)]="currentUser.phoneNumber">
其中[]实现了数据流从组建到模板，()实现了数据流从模板到组件。