用户输入

用户输入触发DOM事件。我们通过事件绑定来监听他们，把更新过的数据导入回我们的组件和model

一、绑定到用户输入事件
你可以使用Angular事件绑定机制来响应任何DOM事件，许多DOM事件是由用户输入触发的，绑定这些事件可以获得用户输入。
要绑定DOM事件，只要把DOM事件的名字包裹在圆括号中，然后放在引号中的模板语句对其赋值就行了。

<button (click)="onClickMe()">Click me!</button>

等号左边的（click）表示把按钮的点击事件作为绑定目标，等号右边是模板语句。
写绑定时，需要知道模板语句的执行上下文，出现在模板语句中的每个标识符都属于特定的上下文对象，这个对象通常都是控制此模板的Angular。
上例只显示了一行HTML，那段HTML片段数据下面这个组件。

@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'You are my hero!';
  }
}

二、通过$event对象取得用户输入
DOM事件可以携带可能对组件有用的信息。
下面的代码监听keyup事件，并将整个事件载荷（$event）传递给组件的事件处理器。

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

当用户按下并释放一个按键时，触发keyup事件，Angular在$event变量提供一个相应的DOM事件，上面的代码把他作为参数传递给onKey()方法。

export class KeyUpComponent_v1 {
  values = '';

  onKey(event:any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

$event对象的属性取决于DOM事件的类型，例如鼠标和输入框就包含了不同的信息。
所有标准DOM事件都有一个target属性，引用触发该事件的元素，在本例中，target是input元素，value.target.value返回当前内容。
在组件的onKey()方法中，把输入框的值和分隔符追加组件的value属性，使用插值表达式来存放累加的结果的values属性显示到屏幕上。

三、从一个模板引用变量
传入$event是个不好的做法，这样组件会知道太多模板信息。这违反了模板和组件之间的分离关注原则。
下面的例子使用了局部模板变量：

@Component（{
template:`<input #box (keyup) = "0">
<p>{{box.value}}</p>
`
}）

export class ..{
onKey(value: string){
this.value += value + '|';
}
}

这个模板引用变量名叫做box，在input元素中声明，他引用input元素本身，代码使box获得输入value的值，并通过插值表达式显示在p标签中。

四、按键事件过滤
keyup事件监听每一次按键，有时只在意回车键，解决这问题的一种方法是检查每个$event.keycode。
但更简单的方式是绑定Angular的keyup.enter模拟事件，然后，当用户点击回车时才会处理该事件。

@Component({
template: `
<input #box (keyup.enter) = "onEnter(box.value)">
`
})

五、失去焦点事件

template: `
<input #box (keyup.enter) = "update(box.value)"
(blur) = "update(box.value)">
`