Angular 中的数据绑定
Angular 中的数据绑定
原文链接：Data Binding in Angular - 原文作者 Amit Dhiman
本文采用意译的方式
- 插值绑定: 将动态的值插入到模版内容中，我们使用
{{}}符 - 属性（Property）绑定:
绑定组件属性到HTML元素属性中，我们使用[]符 - 事件绑定：监听
DOM事件，并在组件中触发方法，我们使用()符 - 双向绑定：结合 属性绑定 和 事件绑定 来实现数据流的双向绑定，我们在表单控件中使用
[(ngModel)] - 样式绑定：为
HTML元素动态设定CSS行内样式，我们使用[style.style-property]="value" - 类名绑定：基于条件或者组件属性，为
HTML元素动态添加或者移除CSS类名，我们分别使用[class.class-name]="condition"或[ngClass]="{ 'class-name': condition }" - 属性（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点在实际开发中，使用频率频繁