Angular 2 用户输入 - $event 对象
HTML 中,用户点击链接、按下按钮或者输入文字时,这些用户的交互行为都会触发 DOM 事件
本章我们开始学习如何使用 AngularJS 2 事件绑定语法来绑定这些事件
接下来的范例都是基于 AngularJS 2 TypeScript 环境配置 上修改而来
通过 $event 对象取得用户输入
AngularJS 2 可以绑定到所有类型的事件
下面的代码绑定到一个输入框的 keyup 事件,并且把用户输入的东西回显到屏幕上
app/app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class AppComponent{ values = ''; /* // 非强类型 onKey(event:any) { this.values += event.target.value + ' | '; } */ // 强类型 onKey(event: KeyboardEvent) { this.values += (<HTMLInputElement>event.target).value + ' | '; } }
上面的代码监听了一个事件并捕获用户输入,Angular 把事件对象存入 $event 变量中
组件的 onKey() 方法是用来从事件对象中提取出用户输入的,再将输入的值累加到 values 的属性
运行以上 范例,演示如下