Angular 2 用户输入事件绑定与模板变量实战教程

本文介绍如何在 Angular 2 中处理用户输入事件，涵盖点击事件绑定、$event 对象获取输入、模板引用变量使用、按键过滤（keyup enter）及 blur 事件。通过完整代码示例，帮助开发者掌握 Angular 事件绑定的核心语法与最佳实践。

在 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 均会更新为最新输入值，提升交互体验与数据一致性。