面试题：Angular中单向数据绑定的类型及常见应用场景

Question

请简述Angular中单向数据绑定的主要类型（至少两种），并举例说明每种类型在实际项目中的应用场景。

Answer 1

插值表达式

• 主要类型：通过{{}}语法将数据绑定到HTML模板中。
• 应用场景：在实际项目中常用于显示简单文本信息。例如，在用户资料页面显示用户名，假设组件中有一个userName属性：

<div>欢迎，{{userName}}</div>

属性绑定

• 主要类型：使用[属性名]语法将组件中的数据绑定到HTML元素的属性上。
• 应用场景：比如控制按钮的禁用状态。假设组件中有一个isButtonDisabled属性：

<button [disabled]="isButtonDisabled">提交</button>

事件绑定

• 主要类型：通过(事件名)语法将HTML元素的事件绑定到组件中的方法。虽然它从数据流向角度看，是从视图到组件，和传统意义上从组件到视图的单向数据绑定有所不同，但也是单向数据流动的一种体现。
• 应用场景：在一个待办事项列表应用中，点击删除按钮删除事项。假设组件中有一个deleteTodo方法：

<button (click)="deleteTodo(todo)">删除</button>