Angular 中的数据绑定

原文链接：Data Binding in Angular - 原文作者 Amit Dhiman

本文采用意译的方式

1. 插值绑定: 将动态的值插入到模版内容中，我们使用 {{}} 符
2. 属性（Property）绑定: 绑定组件属性到 HTML 元素属性中，我们使用 [] 符
3. 事件绑定：监听 DOM 事件，并在组件中触发方法，我们使用 () 符
4. 双向绑定：结合 属性绑定 和 事件绑定 来实现数据流的双向绑定，我们在表单控件中使用[(ngModel)]
5. 样式绑定：为 HTML 元素动态设定 CSS 行内样式，我们使用 [style.style-property]="value"
6. 类名绑定：基于条件或者组件属性，为 HTML 元素动态添加或者移除 CSS 类名，我们分别使用 [class.class-name]="condition" 或 [ngClass]="{ 'class-name': condition }"
7. 属性（Attribute）绑定: 动态设置 HTML 元素属性，我们使用 [attr.attribute-name]="value"

译者加：注意 属性（Property）绑定 和 属性（Attribute）绑定，前者是绑定到 DOM 元素属性，后者是绑定到 HTML 属性。What is the difference between property and attribute binding in AngularJS? 两者都可以简单理解为：将属性绑定到 HTML 元素上即可。

两种类型的数据绑定

单向数据绑定

从组件（数据）到视图：绑定组件数据到视图上，我们使用插值 Interpolation 和属性 Property 绑定。

从试图到组件（数据）：绑定试图数据到组件数据上，我们使用事件 Event 绑定。

双向数据绑定

我们使用 ngModel 来实现双向数据绑定。

插值和属性绑定

在 Angular 中，插值 Interpolation 和属性 Property 绑定都用来传递组件类数据到模板（视图）中。嗯～区别是它们怎么实现这个任务，我们在哪里使用它们。

下面是 Angular 中 Interpolation 插值绑定和 Property 绑定的主要区别：

语法

• Interpolation 绑定：插值绑定在模板 HTML 内容中，使用{{}}来包含表达式或者变量。比如：{{ title }}。
• Property 绑定：属性绑定在 HTML 元素中实现组件属性，使用 [] 来绑定一个属性。比如：[src]="imageUrl"。

用法

• Interpolation 绑定：用于将动态内容插入到模板的 HTML 中，例如在文本元素中显示组件属性。
• Property 绑定：用于根据组件属性设置 HTML元素的属性，例如给予组件属性 attributes 或者属性值 property value，比如 src, href, disabled 等。

方向

• Interpolation 绑定：单向绑定，从组件数据 -> 视图。组件属性数据的更改都会反映在视图上。
• Property 绑定：也是单向绑定，从组件数据 -> 视图。组件数据绑定到元素的属性上。对组件属性数据的更改会更改相应的元素属性。

表达式 vs 属性

• Interpolation 绑定：它是为单个表达式或者变量而设计的。你不可以使用它绑定属性，只能用来显示动态内容。
• Property 绑定：它允许你直接绑定元素属性。你可以用它来设定 HTML 元素中 attributes 和 properties 的值。

例子

• Interpolation 绑定：

<p>Hello, {{ name }}</p>  
<p style.color="{{redcolor}}">red</p>  
<span class="{{givemered}}">red</span>  
<img src="{{imageUrl}}">This is Red</p>  
Welcome {{getFirstName()}}  
pipe : {{title | uppercase}}  
{{data?.data}} // safe navigation operator

在这个例子中，name 被插入到段落的文本内容中。

• Property 绑定：

<img [src]="imageUrl" [alt]="imageAlt">  
<button [disabled]="isDisabled">I am disabled </button>

在这个例子中，imageUrl 和 imageAlt 分别是 <img> 元素的 src 和 alt 属性值。

总得来说，Interpolation 插值绑定用来在模板中展示动态的内容，而 Property 属性绑定是用来将组件属性绑定到元素的 properties 和 attributes 上。两者在 Angular 应用中都很重要，我们根据使用场景来选择使用。

事件绑定

事件绑定允许我们将事件（比如按键、点击、悬停、触摸等）绑定到数组中的一个方法。它是从视图到组件的单向绑定。

<button (click)="clickMe()">Click me</button>  
<p> You have clicked {{clickCout}}</p>

clickCount = 0  
clickMe(){  
this.clickCount++;  
}

通过事件绑定传递数据：

<input (input)="handleInput($event)">  
<p> You have entered {{value}}</p>

value = ""  
handleInput(event){  
this.value = (event.target as HTMLInputElement).value;  
}

将模板引用变量传递给函数：

<input #e1 (input)="handleInput1(e1)">  
<p> You have entered {{value}}</p>

value = "";  
handleInput1(element){  
this.value = element.value  
}

双向绑定

在双向绑定中，我们使用包含在 FormsModule 包中的 ngModel。

<input type="text" name="value" [(ngModel)]="value">  
<p>You entered {{value}}</p>  
<button (click)="clearValue()">Clear</button>

value = ""  
clearValue(){  
this.value = "";  
}

译者加：开篇总结的 1-7 点在实际开发中，使用频率频繁