angular2--数据绑定

        今天要跟大家分享的是angular2模板中涉及到的数据绑定，Angular提供了多种数据绑定方式，可以根据数据流动的方向分为三种，详见下文：

1) 单向：从数据源到视图目标(属性绑定)，插值DOM元素属性绑定，HTML标签特性绑定

2) 单向： 从视图目标到数据源(事件绑定)

3) 双向绑定

上面介绍了系统的分类，下面将具体介绍详细的绑定方式

1.插值绑定(使用双大括号{{ }}的语法)

实现方式：

<div>手机号码：</div><div>{{detail.telNum}}</div>

当然表达式也可以调用宿主组件的函数，例如：

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

2.属性绑定(使用[])

       这里详细的说一下，在属性绑定中，"="左侧中括号的作用是让Angular执行"="右侧的模板表达式，并将结果赋值给该目标属性。如果没有中括号，Angular就会把"="右侧的模板表达式当做一个字符串常量，而不会计算该字符串，所以如果是赋值给该目标属性的值是一个字符串，中括号可以省略。

(1)DOM元素属性绑定

    1)实现方式：<img [src]="srcUrl">

       这样就可以将img标签的src属性设置为组件中的srcUrl值。但是使用[]只能绑定在DOM元素已有的属性上，例如<div [src]="srcUr"></div>是会报错的，以为div不存在src属性。

    2)设置Angular指令的属性

     <div [ngStyle]="styles"></div>

    3)还可以使用属性绑定设置自定义组件的输入属性(这是父子组件间通讯的重要途径，详情可以见上篇组件交互的文章)，示例代码如下：

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

(2) css类绑定

    1)<div class="red font14"  [class]="changeGreen"></div>

    2)<div class="red font14"  [class.className]="isBlue()">>

这两者的区别分别是，第一种当DOM对象属性绑定给[class]绑定值时，changeCreen会覆盖这个div元素的全部class。第二种当isBlue()返回值为true时，className这个类添加到该绑定的标签上，否则移除这个类

(3)Style样式绑定

HTML标签内联样式可以通过Style样式绑定的方式来设置。样式属性可以使用烤肉串命名法(font-size),也可以使用驼峰式(fontSize)命名。

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

<div [style.font-size.px]="isLarge ? 18 : 13 "></div>

3.事件绑定

事件绑定也是一种单向数据绑定方式，数据从模板流向组件类。

<div class="edit" (click)="editContact()"></div>

用事件绑定来监听按钮的点击事件，只要触发点击事件，就会调用editContact()方法。其中还有键盘事件，鼠标事件，触屏事件等来执行其对应绑定的方法。

当然，也可以通过@Output在我们的组件中添加自定义事件，@Output顾名思义就是在子组件中向父组件输出东西(这里就不细讲了，想了解的朋友可以看看组件交互那一块)。

4.双向绑定

Angular2是通过[()]来实现的，例如<input [(ngModel)]="value">就是双向绑定input元素的值。但是需要注意的是[()]只能绑定在有输入输出功能的DOM元素上(例如：input、textare)，如果绑定在div这样的元素上就会报错。

那么，如何通过[()]在我们自定义的指令上实现双向绑定呢？没错，就是使用@Input和@Output来实现。

//父组件

 @Component({

selector: 'my-app',

   template:         

`<customer-counter [(counter)] = "someValue"></customer-counter>

<p> value: {{someValue}}</p>`,

directives:[CustomerCounterComponent] })

export class AppComponent{

someValue = 3;

 }

//子组件

 @Component({

selector: 'customer-counter',

template: `

<button (click)="decrement()">-</button>

<span>{{counter}}</span>`

})

export class CustomerCounterComponent{

counterValue = 0;

@Input()

 get counter(){

 return this.counterValue;

 }

@Output()

 counterChange = new EventEmitter();

 set counter(val) {

      this.counterValue = val;

      this.counterChange.emit(this.counterValue);

}

decrement() { this.counter--; } }

这样<customer-counter [(counter)] = "someValue"></customer-counter >就可以将父组件中的someValue绑定到子组件的counter属性上，同时当子组件的counter属性发生改变时也更新父组件的someValue值。

需要注意的是，我们定义的事件监听是counterChange，而使用的确实[(counter)]。这是因为Angular 2中约定添加后缀Change，也就是[(counter)]等价于[change]和(counterChange)的组合。如果去看[(ngModel)]的实现，你也会发现它是[ngModel]和[ngModelChange]的组合。

今天更新就到这里，谢谢