angular2--数据绑定

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

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

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

3) 双向绑定

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

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

实现方式：

手机号码：

{{detail.telNum}}

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

{{detail.getName()}}

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

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

(1)DOM元素属性绑定

    1)实现方式：

       这样就可以将img标签的src属性设置为组件中的srcUrl值。但是使用[]只能绑定在DOM元素已有的属性上，例如

是会报错的，以为div不存在src属性。

    2)设置Angular指令的属性

    

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

(2) css类绑定

    1)

    2)

>

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

(3)Style样式绑定

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

3.事件绑定

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

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

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

4.双向绑定

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

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

//父组件

 @Component({

selector: 'my-app',

   template:         

`

value: {{someValue}}

`,

directives:[CustomerCounterComponent] })

export class AppComponent{

someValue = 3;

 }

//子组件

 @Component({

selector: 'customer-counter',

template: `

-

{{counter}}`

})

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--; } }

这样就可以将父组件中的someValue绑定到子组件的counter属性上，同时当子组件的counter属性发生改变时也更新父组件的someValue值。

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

今天更新就到这里，谢谢