Angular2数据绑定

Angular2中数据绑定的体例默认是以单标的目的体例，数据绑定的体例可以分为：1、属性绑定和插值表达式 组件类-> 模板。2、事务绑定：模板 -> 组件类。3、双标的目的绑定： 模板 <-> 组件类。

工具/原料

• JavaScript

方式/步骤

1. 1

   一、事务绑定

   事务绑定是把模板中的事务绑定到组件类中的方式上，例如在一个组件中的HTML代码是：

   
2. 2

   (click)暗示要进行的操作，当用户点击时就会执行组件类中的doClick方式

   
3. 3

   二、属性绑定和插值表达式

   其实属性绑定和插值表达式是统一个工具，因为在解析代码时，插值表达式会转换为属性绑定，所以想用哪个就用哪个

   下面的代码感化都是一样的

   
4. 4

   属性绑定又分为HTML属性绑定和DOM属性绑定。先来看一个例子：

   
5. 5

   可以看到event.target.value是获取的DOM属性，是可变的。暗示当前元素的状况

   而event.target.getAttribute("value")获取的是HTML属性，是不成变的。只负责初始化HTML元素，不成改变

   注重：

   1、有些DOM属性没有映射的HTML属性，同样有些HTML属性也没有映射的DOM属性

   2、模板绑定的是DOM属性

   三、HTML属性绑定

   1、根基HTML属性绑定

   <td [attr.colspan]="表达式"></td>

   
6. 6

   四、双标的目的绑定

   双标的目的绑定可以从组件类 -> 模板，也可以从模板 -> 组件类

   例子：

   
7. 7

   操纵[(ngModel)]可以实现双标的目的数据绑定，首先在输入框中点窜name，从而改变组件类中name的值，是模板组  -> 件类，点窜值之后三秒，又从头设置name的值，是组件类 -> 模板。