面试题：Angular数据绑定中的双向绑定原理及应用场景

数据流向：Angular的双向绑定是基于@Input()和@Output()装饰器以及EventEmitter来实现的。在视图和组件之间，数据有两个流向：从组件到视图，以及从视图到组件。
从组件到视图：通过@Input()装饰器将组件中的数据绑定到视图模板中。当组件中的数据发生变化时，Angular的变化检测机制会检测到这些变化，并更新视图。变化检测机制主要通过脏检查（dirty-checking）算法，遍历组件树，检查每个组件的数据是否发生变化。如果数据变化，就会更新相应的DOM元素。
从视图到组件：使用@Output()装饰器结合EventEmitter来实现。EventEmitter是一个类，用于在组件中发出自定义事件。当视图中的事件（如按钮点击、输入框值变化等）发生时，会触发对应的EventEmitter事件，从而将视图中的数据传递回组件。

初始化阶段：在组件初始化时，Angular会将组件的数据通过@Input()绑定到视图上，视图会显示初始数据。
数据变化阶段：
- 组件数据变化：当组件中的数据发生变化时，变化检测机制会检测到变化，然后更新视图。例如，组件中有一个变量name，当在组件内部修改name的值时，视图中绑定了name的地方会立即更新显示新的值。
- 视图数据变化：当视图中的元素触发事件（如输入框输入内容），通过@Output()和EventEmitter将数据传递回组件。例如，输入框绑定了一个(input)事件，当输入框内容变化时，会触发该事件，将新的输入值传递给组件，组件接收到值后可以更新自身的数据状态。

用户登录表单：在登录页面，用户名和密码输入框需要双向绑定。用户在输入框中输入内容（视图到组件），组件可以实时获取输入的值，并进行验证等操作。同时，如果在组件中因为某些逻辑（如重置操作）修改了输入框的值，视图中的输入框也会相应更新（组件到视图）。
```
<input [(ngModel)]="username" placeholder="用户名">
<input [(ngModel)]="password" type="password" placeholder="密码">
```
在组件中：
```
export class LoginComponent {
  username: string = '';
  password: string = '';
  // 可以在这里对username和password进行验证等操作
}
```
购物车数量调整：在电商购物车页面，每个商品的数量输入框使用双向绑定。用户可以在输入框中直接修改商品数量（视图到组件），组件接收到新的数量后，计算总价等操作。如果因为库存不足等原因，组件修改了数量（组件到视图），视图中的输入框也会显示新的数量。
```
<input [(ngModel)]="product.quantity" type="number">
```
在组件中：
```
export class CartComponent {
  product: { name: string; quantity: number; price: number } = { name: '商品1', quantity: 1, price: 10 };
  calculateTotal() {
    return this.product.quantity * this.product.price;
  }
}
```

星途面试题库