在 Angular 应用中，用户点击、按键或输入文本都会触发 DOM 事件。掌握事件绑定语法是构建交互式界面的基础。本文将通过点击、keyup、模板变量、按键过滤与 blur 事件等场景，逐步演示如何安全高效地捕获并处理用户输入。
绑定到用户输入事件
Angular 的事件绑定机制允许组件直接响应任何 DOM 事件。语法采用圆括号包裹事件名，右侧为模板语句。例如，将按钮的点击事件绑定到组件方法：
等号左侧的 (click) 指定绑定目标为点击事件，右侧引号内的文本是组件中定义的方法调用。完整组件实现如下：
app/click-me.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'click-me',
template: `
{{clickMessage}}`
})
export class ClickMeComponent {
clickMessage = '';
onClickMe() {
this.clickMessage = '菜鸟教程!';
}
}点击按钮后，clickMessage 属性会被更新，并通过插值表达式实时显示在视图中。
通过 $event 对象取得用户输入
对于输入类控件，通常需要在事件触发时获取用户输入的具体内容。Angular 会将原生 DOM 事件对象注入到 $event 变量中，供模板语句使用。
app/keyup.component.ts (v1)
@Component({
selector: 'key-up1',
template: `
{{values}}
`
})
export class KeyUpComponent_v1 {
values = '';
// 强类型写法
onKey(event: KeyboardEvent) {
this.values += (event.target).value + ' | ';
}
} 组件的 onKey() 方法接收事件对象，通过类型断言提取 event.target 的 value 属性，并累加到 values 中。使用强类型 KeyboardEvent 可提升代码可维护性与类型安全。
从模板引用变量中获得用户输入
模板引用变量通过在标识符前添加井号（#）声明，可直接引用 DOM 元素或组件实例。利用该特性，可避免频繁传递 $event，简化数据提取逻辑。
基础用法：app/loop-back.component.ts
@Component({
selector: 'loop-back',
template: `
{{box.value}}
`
})
export class LoopbackComponent { }#box 指向 元素本身，模板中可直接通过 box.value 读取输入内容。即使 (keyup)="0" 不执行任何逻辑，视图仍会随输入实时更新。
结合模板变量优化 keyup 处理
将模板变量传入组件方法，可进一步简化事件处理：
app/keyup.components.ts (v2)
@Component({
selector: 'key-up2',
template: `
{{values}}
`
})
export class KeyUpComponent_v2 {
values = '';
onKey(value: string) {
this.values += value + ' | ';
}
}此时组件方法仅接收字符串值，无需处理 DOM 事件对象，逻辑更清晰且易于测试。
按键事件过滤与 blur 事件
默认情况下，(keyup) 会在每次按键时触发。若只需在特定按键（如回车）时更新数据，可使用 Angular 提供的伪事件语法进行过滤。
仅监听回车键：app/keyup.components.ts (v3)
@Component({
selector: 'key-up3',
template: `
{{values}}
`
})
export class KeyUpComponent_v3 {
values = '';
}(keyup.enter) 仅在用户按下回车键时触发，避免无效更新。该语法同样适用于其他按键，如 keyup.escape、keydown.shift 等。
结合 blur 事件：app/keyup.components.ts (v4)
在表单场景中，常需在输入框失去焦点时同步数据。可同时绑定 keyup.enter 与 blur 事件：
@Component({
selector: 'key-up4',
template: `
{{values}}
`
})
export class KeyUpComponent_v4 {
values = '';
}该组合确保用户按下回车或点击页面其他区域时，values 均会更新为最新输入值，提升交互体验与数据一致性。
