ng2数据绑定

数据绑定为应用程序提供了一种简单一致的机制，来管理与协调数据的显示，以及数据值的变化。angular提供了多种数据绑定方式，可以根据数据流动的方向分为三种。

数据绑定的类别

除插值外，在=左侧都会有一个目标名称，它可以被[]、()包裹，或者加上一个前缀（bind-、on-、bindon-），这被称为绑定目标。=右侧或者插值符号{{}}中的部分则被称为绑定源。

DOM对象属性和HTML标签特性

DOM对象属性（Property）以DOM元素作为对象，其附加的内容，是在文档对象模型里定义的，如childNodes、firstChild等。
HTML标签特性（Attribute）是DOM节点自带的属性，是在HTML里定义的，即只要是HTML标签中出现的属性都是Attribute，例如colspan、align等。
两者的联系和区别还体现在以下两个方面：

大多数情况下，DOM对象属性与HTML标签特性并不是一一对应的，但有少量属性既是DOM对象属性又是HTML标签特性，如id、title、class等。
通常HTML标签特性代表着初始值，初始化后就不再发生改变，而DOM对象属性代表着当前值，默认为初始值，但它会随着属性值的变化而变化。

数据绑定是借助于元素和指令的DOM对象和事件来运作的，而不是HTML标签特性。在angular中，HTML标签特性的唯一作用就是用来进行元素和指令状态的初始化。

插值

数据绑定最常见的形式就是插值，默认使用双大括号{{}}的语法。使用插值可以在HTML元素标签和属性值内将变量输出。

<p>{{detail.telNum}}</p>

大括号中间的值通常是一个组件属性的变量名，angular使用相应组件属性的值来替换这个变量。大括号里还可以是一个合法的模板表达式，angular会首先进行求值，然后转换成一个字符串输出到页面上。

<p>{{512+512}}</p>

表达式甚至可以调用宿主组件的函数。

<p>{{detail.getName()}}</p>

模板表达式

绝大部分的JS表达式都是合法的模板表达式。模板表达式应用在插值语法的双大括号中和属性绑定“=”右侧的引号中。

模板表达式上下文

模板表达式的上下文通常就是它所在组件的实例，也可以包括组件之外的对象，如模板局部变量。
模板表达式不能引用任何全局命名空间中的成员，如window和document，也不能调用console.log()或者Math.random()等方法。

模板表达式的书写原则

1.避免视图变化的副作用
一个模板表达式只能改变目标属性的值，不应改变应用的任何状态，angular的“单向数据流”模式正式基于这条原则而来。在单独的渲染过程中，视图应是可预测到的，不必担心在读取组件值时会不小心改变其他的一些展示值。
2.能够高效地执行
3.使用简单的语句
4.幂等性优先

属性绑定

属性绑定是一种单向的数据绑定，数据从组件类流向模板。当要把一个视图元素的属性设置为模板表达式时，就需要用到模板的属性绑定。
属性绑定不能用来从目标元素获取值，或者调用目标元素的方法，也就是说目标元素的值只能被设置，不能被读取。但我们可以用@ViewChild和@ContentChild来读取目标元素的属性或调用它的方法。

DOM元素属性绑定

最常用的属性绑定是把元素的属性绑定到组件的属性上。

<div [title]="titleText">DOM对象属性（title）就是绑定目标</div>
<div bind-title="titleText">这种绑定又称为标准形式</div>
//设置angular指令的属性
<div [ngStyle]="styles">[ngStyle]绑定到styles属性</div>

此外，还可以使用属性绑定设置自定义组件的输入属性。

<user-detail [user]="currentUser"><user-detail>

中括号

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

HTML标签特性绑定

anular推荐使用DOM元素属性绑定，但当元素没有对应的属性可绑定的时候，则可以使用HTML标签特性绑定来设置值。如<table>中的colspan或rowspan等HTML标签特性，是纯粹HTML标签特性，并没有相对应的DOM属性可供绑定，如果直接使用模板表达式赋值，会出现一个模板解析的错误，因为colspan在<td>元素中并不是DOM元素属性，而是HTML标签特性。插值和属性绑定只能设置DOM元素属性，不能设置HTML标签特性。

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

HTML标签特性绑定的中括号中的部分不是一个元素的属性名，而是由attr.的前缀和HTML标签特性名称组成的形式，然后通过一个模板表达式来设置HTML标签特性的值。

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

CSS类绑定

CSS类既属于HTML标签特性，又属于DOM对象属性，所以可以使用两种方式来完成属性绑定。

//changeGreen对象会重写div元素的全部class
<div class="red font14" [class]="changeGreen">绿色字</div>

CSS类属性绑定还有一种特有的绑定方式，即类似于[class.class-name]的语法形式来完成属性绑定，当被赋值为true时，将class-name这个类添加到该绑定的标签上，否则移除这个类。

<div [class.color-blue]="isBlue()">若isBlue()返回true，字体将变为蓝色</div>
<div class="footer" [class.footer]="showFooter">
若showFooter为false，则footer这个CSS类将被移除
</div>

Style样式绑定

HTML标签内联样式可以通过Style样式绑定的方式来设置。样式绑定在语法上采用形如[style.style-property]的写法。

<button [style.background-color]="canClick?'blue':'grey' "><button>

在设置内联样式时也可以带上样式单位。

<button [style.font-size.px]="isLarge?18:13"></button>
<div [style.width.%]="!isHalf?100:50">

样式属性可以采用烤肉串命名法（如font-size），也可以采用驼峰式命名法（如fontSize）。

属性绑定与插值的关系

属性绑定和插值在本质上没有区别，在渲染视图前，angular会将插值表达式转换成属性绑定的形式。

<div>{{userName}}</div>
<div [innerHTML]="userName"></div>

事件绑定

事件绑定也是一种单向数据绑定形式，数据从模板流向组件类。angular通过监听用户操作事件，如键盘事件、鼠标事件等来执行其对应绑定的语法。事件绑定的语法是由=左侧小括号内的目标事件和=右侧引号中的模板语句组成。

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

模板语句

模板语句是用来响应由绑定目标所触发的事件。模板语句可以帮助我们实现接收用户的输入来更新应用的状态。模板语句和模板表达式的解析器不同，模板语句除了支持=赋值操作外，也支持用分号或逗号串联起多条语句。有些JS表达式在模板语句中是不被支持的：

赋值操作，如+=和-=
自增和自减操作符（++和--）
new操作符
位运算符|和&
模板表达式运算符

模板语句的上下文环境就是绑定事件对应组件的实例。模板语句的上下文也可以包含组件之外的对象，如模板局部变量和事件绑定语句中的$event。

目标事件

在小括号中的事件名表示目标事件。除了小括号，也可以使用带on-前缀的形式来标记目标事件。目标事件可以是常见的元素事件，也可以是自定义指令的事件。

<a class="edit" (click)="editContact()">编辑</a>
<a class="edit" on-click="editContact()">编辑</a>
<a class="edit" (myClick)="editContact=$event">编辑</a>

angular在解析目标事件时，会优先判断是否匹配已知指令的事件，如果事件名既不是某个已知指令的事件，也不是元素事件，angular会抛出一个“未知指令”的错误。

$event事件对象

当用户单击某个元素时，就会触发元素绑定的事件，接着就会执行模板语句。这里可以通过$event事件对象来获取该事件的相关信息。目标事件的类型决定了事件对象的形态，目标事件可以是DOM元素事件，也可以是自定义事件。若目标事件是原生DOM；元素事件，则$event将是一个包含target和target.value属性的DOM事件对象。

<input [value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value" />

自定义事件

在angular中，组件要触发自定义事件可以借助于EventEmitter。在组件中可以创建一个EventEmitter实例对象，并将其以输出属性的形式暴露出来。父组件通过绑定这个输出属性来自定义一个事件，在组件中调用EventEmitter.emit(payload)来触发这个自定义事件，其中payload可以传入任何值，父组件绑定的事件可以通过$event对象来访问payload的数据。

//item.component.ts
import { Component,Input,Output,EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
@Component({
    selector:'list-item',
    templateUrl:'app/list/item.component.html',
    styleUrls:['app/list/item.component.css']
})
export class ListItemComponent{
    @Input() contact:any={};
    @Output() routerNavigate=new EventEmitter<number>();
    goDetail(num:number){
        this.routerNavigate.emit(num);
    }
}
<!--item.component.html-->
<a (click)="goDetail(contact.id)">...</a>
//父组件list.component.html
<ul class="list">
    <li *ngFor="let contact of contacts">
        <list-li [contact]="contact" (routerNavigate)="routerNavigate($event)">
        </list-li>
    </li>
</ul>

双向数据绑定

可以利用属性绑定和事件绑定结合的形式实现双向数据绑定。

<input [value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value" />

angular提供了NgModule指令来更方便的实现双向数据绑定。

<input [ngModel]="currentUser.phoneNumber" />
<input bind-ngModel="currentUser.phoneNumber" />

[()]这种语法只能设置一个数据绑定属性，若想完成更多不同的任务，可以采用展开形式。

<input [ngModel]="currentUser.phoneNumber" (ngModelChange)=addPhoneNumber($event) />

双向数据绑定原理

[(ngModel)]可以拆分为ngModel和ngModelChange两部分。其中，ngModel是作为NgModel指令的输入属性用来设置元素的值，ngModelChange作为NgModel指令的输出属性用来监听元素值是否变化。
ngModelChange属性并不会生成DOM事件，实际上它是一个EventEmitter类型的对象。

@Directive({
    selector:"[ngModel]",
    host:{
        "[value]":"ngModel",
        "(input)":"ngModelChange.next($event.target.value)"
    }
})
class NgModelDirective{
    @Input() ngModel:any;
    @Output() ngModelChange:EventEmitter=new EventEmitter();
}

host属性用来描述和指令元素相关的输入输出属性变化，即当[ngModel]的ngModelChange事件发生时就会触发input事件，当[ngModel]的ngModel值变化时就会更新value属性。
当angular解析一个[(x)]的绑定目标时，相当于为这个x指令绑定一个名为x的输入属性和一个名为xChange的输出属性。

<span [(x)]="e"></span>
//等同于下面的代码
<span [x]="e" (xChange)="e=$event"></span>

双向数据绑定实际上就是通过输入属性存储数据，同时通过一个与之对应的输出属性（输入属性+Change后缀）监听输入属性的数据变化来触发相应的事件。
支持双向绑定的组件例子：

//amount.component.ts
import { Component,Input,Output,EventEmitter } from '@angular/core';
@Component({
    selector:'amount',
    template:`
        <span>
            子组件当前值：{{value}}-
            <button (click)="increment()">增加</button>
        </span>
    `
})
export class AmountComponent{
    @Input() value:number=0;
    @Output() valueChange:EventEmitter<number>=new EventEmitter<number>();
    increment(){
        this.value++;
        this.valueChange.emit(this.value);
    }
}
//app.component.ts
import { Component,Input } from '@angular/core';
import { AmountComponent } from './amount.component';
@Component({
    selector:'app',
    template:`
        <div>
            <div>
                <span>Number1:</span>
                <amount [(value)]="number1"></amount>
            </div>
        </div>
    `
})
export class Parent{
    number1:number=0;
    number2:number=1;
}

输入输出属性

=右侧称之为数据绑定的源，=左侧称之为数据绑定的目标。

<!--list.component.html-->
<list-item [contact]="contact" (routerNavigate)="routerNavigate($event)">
</list-item>

contact是属性绑定的目标，routerNavigate是事件绑定的目标。数据通过模板表达式流向目标属性contact，那么contact在组件ListComponent中是输入属性。在事件绑定中，数据流向routernavigate绑定源，传递给接收者，在组件ListComponent中routerNavigate是一个输出属性。

声明输入和输出属性

绑定目标必须被明确地标记为输入或输出属性。

输入和输出属性别名

定义输入输出属性别名有两种方式：
一，通过@Input或@Output装饰器为属性指定别名。

@Output('goto') clicks=new EventEmitter<number>();

二，采用组件（指令）元数据的inputs或outputs数组可以为属性指定别名。

@Component({
    outputs:['clicks:goto']
})

安全导航操作符

安全导航操作符?.是一种特殊的连接操作符。

<p>{{detail.telNum}}</p>

如果模板变量detail没被赋值，在angular中会因为报错而导致程序无法运行，从而使页面渲染失败。可以通过下面的方式来规避这种错误。

<p>{{detail&&detail.telNum}}</p>