面试题：Angular数据绑定的基本类型及原理

Question

请简述Angular中数据绑定的几种基本类型，如单向数据绑定、双向数据绑定，并说明它们各自的数据流向及核心实现原理。

Answer 1

单向数据绑定

1. 数据流向：从组件类到模板。即组件类中的数据变化会反映到模板视图上，但模板视图的变化不会影响组件类的数据。
2. 核心实现原理：通过 @Input() 装饰器将数据从父组件传递到子组件，或直接在模板中使用组件类的属性。Angular 使用变化检测机制来检查组件数据的变化，一旦检测到变化，就会更新模板中绑定的部分。例如，在模板中使用 {{propertyName}} 来显示组件类中的 propertyName 属性值，当 propertyName 在组件类中发生变化时，模板会自动更新显示。

双向数据绑定

1. 数据流向：数据在组件类和模板之间双向流动。即模板视图的变化会同步更新到组件类的数据，同时组件类数据的变化也会反映到模板视图上。
2. 核心实现原理：本质上是单向数据绑定（从组件到模板）和事件绑定（从模板到组件）的结合。在Angular中通过 [(ngModel)] 指令来实现双向数据绑定，ngModel 指令会同时监听输入事件（如 input 事件）并更新组件数据，同时在组件数据变化时更新模板视图。例如，在一个输入框上使用 [(ngModel)]="data"，当用户在输入框中输入内容时，data 属性会被更新；而当 data 属性在组件类中被修改时，输入框的内容也会同步更新。