Angular数据绑定：单向与双向详解
在Angular框架中，数据绑定是连接组件逻辑与用户界面视图的关键机制，它使得数据在模型层与视图层之间实现高效同步。本文将深入探讨Angular的两种核心数据绑定模式：单向绑定与双向绑定，并阐述如何在自定义组件中构建支持双向绑定的属性。
单向数据绑定
单向绑定允许数据从组件（父级）流向视图（子级），但反向流动被阻止。这意味着当组件的数据发生改变时，视图会即时反映这些变化；反之，用户在视图上的交互（如输入）不会直接影响到组件的原始数据。
示例：单向绑定
假设我们有一个组件类，其中定义了一个名为userName的字符串属性：
export class UserProfileComponent {
userName: string = 'Alice';
}
在对应的HTML模板中，我们可以使用插值表达式（Interpolation）将userName的值显示出来：
<h1>Hello, {{ userName }}!</h1>
在此场景下，{{ userName }}会将userName属性的值渲染到<h1>标签内。当userName在组件内部被更新时，视图会同步更新。然而，如果<h1>标签是一个可编辑元素（虽然不常见），用户对其内容的修改将不会回传到userName变量。
双向数据绑定
双向绑定则实现了数据在组件与视图之间的双向同步。数据可以从组件流向视图，同时用户在视图上的操作（如在表单控件中输入）也可以实时地更新组件中的数据。这种模式极大地简化了表单处理和用户交互的实现。
示例：双向绑定
考虑一个包含用户名的组件属性，我们希望用户可以直接在输入框中修改此信息，并且视图能够即时反馈：
export class UserProfileComponent {
userName: string = 'Alice';
}
在模板中，我们可以利用Angular的ngModel指令（需要导入FormsModule）来实现双向绑定：
<input type="text" [(ngModel)]="userName" placeholder="Enter your name">
<p>Your current name is: {{ userName }}</p>
[(ngModel)]="userName"语法糖结合了属性绑定（[ngModel]="userName"）和事件绑定（(ngModelChange)="userName = $event"）。这意味着当用户在输入框中键入内容时，userName属性会自动更新；同时，<p>标签中显示的{{ userName }}也会同步更新，显示最新的输入值。
自定义组件的双向绑定
要让自定义组件支持双向绑定，通常需要结合@Input和@Output装饰器。@Input用于接收父组件传递过来的值，而@Output配合EventEmitter则用于将子组件内部的变化通知给父组件。
示例：实现自定义组件的双向绑定
创建一个名为CustomCounterComponent的组件，它有一个计数器的值，并允许父组件通过双向绑定来控制和监听这个值：
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-custom-counter',
template: `
<div>
<p>Counter: {{ internalValue }}</p>
<button (click)="increaseCounter()">+1</button>
<button (click)="decreaseCounter()">-1</button>
</div>
`
})
export class CustomCounterComponent {
private _internalValue: number;
@Input()
get internalValue(): number {
return this._internalValue;
}
set internalValue(value: number) {
this._internalValue = value;
this.valueChange.emit(this._internalValue);
}
@Output() valueChange = new EventEmitter<number>();
constructor() { }
increaseCounter(): void {
this.internalValue++;
}
decreaseCounter(): void {
this.internalValue--;
}
}
在这个自定义组件中：
@Input() get internalValue() { ... }和set internalValue(value: number) { ... }定义了一个可读写的属性。当父组件通过属性绑定设置值时，getter被调用；当子组件内部修改值时，setter被触发。@Output() valueChange = new EventEmitter<number>();定义了一个事件发射器，用于向父组件发送通知。- 在
increaseCounter和decreaseCounter方法中，我们修改了internalValue，setter自动触发valueChange.emit()，将新值发送出去。
在父组件的模板中，我们可以像这样使用CustomCounterComponent并实现双向绑定：
<app-custom-counter [(internalValue)]="parentCounterValue"></app-custom-counter>
<p>Value in Parent: {{ parentCounterValue }}</p>
这里的[(internalValue)]="parentCounterValue"利用了Angular的语法糖，实现了CustomCounterComponent的internalValue属性与父组件的parentCounterValue之间的双向同步。当子组件中的计数器改变时，父组件的parentCounterValue也会随之更新。
