Angular 4 - 数据绑定

简介

数据绑定（Data Binding）在Angular中是一个非常重要的概念。它是将数据从组件传递到视图，以及从视图反馈到组件的方式。Angular中有三种类型的数据绑定：

1. Interpolation（插值绑定）
2. Property Binding（属性绑定）
3. Event Binding（事件绑定）

在数据绑定的过程中，Angular会帮我们自动更新视图或组件的状态，让我们不用手动操作DOM元素。

插值绑定

插值绑定是最简单的数据绑定方式，它通过一对花括号把组件的属性插入到视图中。例如：

<span>{{name}}</span>

在上面的例子中，name是组件中定义的属性，通过插值绑定可以把它的值插入到span元素中。

插值绑定不仅可以绑定组件中的属性，还可以绑定一些表达式：

<span>{{1 + 1}}</span>

在上面的例子中，插值绑定把表达式1+1的结果插入到span元素中，即2。

属性绑定

属性绑定是把组件属性的值绑定到元素的属性中。例如：

<img [src]="imgUrl">

在上面的例子中，imgUrl是组件中定义的一个属性，通过属性绑定把它的值绑定到了img元素的src属性中。

属性绑定也可以绑定一个表达式：

<button [disabled]="isDisabled()">Click Me</button>

在上面的例子中，isDisabled()是组件中定义的一个方法，属性绑定把它的返回值绑定到了button元素的disabled属性中。

事件绑定

事件绑定是通过把组件中定义的方法绑定到元素的事件中来实现的。例如：

<button (click)="onClick()">Click Me</button>

在上面的例子中，onClick()是组件中定义的一个方法，事件绑定把它绑定到了button元素的click事件中。

双向绑定

双向绑定是属性绑定和事件绑定的结合体。它可以把组件中的属性值同时绑定到元素的属性和事件中。例如：

<input [(ngModel)]="name">

在上面的例子中，ngModel是Angular中的一个内置指令，它将组件中的name属性绑定到了input元素的value属性中，并且当input元素的value改变时，也会把改变的值反馈回组件中的name属性中。

总结

Angular的数据绑定机制让我们可以轻松地将组件和视图结合起来，让我们不用手动操作DOM元素。Angular提供了几种不同类型的数据绑定，可以根据不同的场景选择不同的方式进行数据绑定。例如，对于一些只需要简单的数据展示的场景，可以使用插值绑定；对于一些需要交互的场景，可以使用事件绑定。在实际开发中，我们应该根据具体的场景选择最合适的数据绑定方式。