Angular2事件绑定

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

Angular事件绑定机制可以用来响应任何DOM事件。

---

方式1：

最常用的绑定方法：
语法：

（DOM事件）= “组件中的处理方法”

或者是：

on-DOM事件= “组件中的处理方法”

举例：绑定用户点击事件

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

等效于

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

以前者为例子：
等号左边的(click)表示把按钮的点击事件作为绑定目标。
等号右边引号中的文本是模板语句，通过调用组件的onClickMe方法来响应这个点击事件。

在组件component.ts中的对onClickMe的方法处理

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

当用户点击按钮时，Angular 调用ClickMeComponent的onClickMe方法。

---

方式2：

结合$event对象进行事件绑定：
语法：(DOM事件)=”处理方法($event)”
举例：绑定用户的输入事件

  <input (keyup)="onKey($event)">

在组件component.ts中的对onKey()的方法处理

@Component({  selector: 'on-key',  template: `   <input (keyup)="onKey($event)">    <p>{{values}}</p>    `})export class KeyUpComponent_v1 {values ='';  onKey(event: any) { // without type info    this.values += event.target.value + ' | ';  }}

当用户按下并释放一个按键时，触发keyup事件，Angular 在$event变量提供一个相应的 DOM 事件对象，上面的代码将它作为参数传递给onKey()方法。
$event对象的属性取决于 DOM 事件的类型。例如，鼠标事件与输入框编辑事件包含了不同的信息。

所有标准 DOM 事件对象都有一个target属性， 引用触发该事件的元素。 在本例中，target是<input>元素， event.target.value返回该元素的当前内容。

在组件的onKey()方法中，把输入框的值和分隔符 (|) 追加组件的values属性。 使用插值表达式来把存放累加结果的values属性回显到屏幕上。

假设用户输入字母“abc”，然后用退格键一个一个删除它们。 用户界面将显示：

a | ab | abc | ab | a | |

或者，你可以用event.key替代event.target.value，累计各个按键本身，这样同样的用户输入可以产生：

a | b | c | backspace | backspace | backspace |

$event的类型

上例将$event转换为any类型。 这样简化了代码，但是有成本。
没有类型信息能够揭示事件对象的属性，防止简单的错误。

如果你使用的是带类型的方法：

export class KeyUpComponent_v1 {  values = '';  onKey(event: KeyboardEvent) { // with type info    this.values += (<HTMLInputElement>event.target).value + ' | ';  }}

$event的类型现在是KeyboardEvent。 不是所有的元素都有value属性，所以它将target转换为输入元素。 OnKey方法更加清晰的表达了它期望从模板得到什么类型的事件，以及它是如何解析事件的。

$event并不可靠

类型化事件对象揭露了重要的一点：

即反对把整个 DOM 事件传到方法中，因为这样组件会知道太多模板的信息。

但是只有当它知道更多它本不应了解的 HTML 实现细节时，它才能提取信息。不过这就违反了模板（用户看到的）和组件（应用如何处理用户数据）之间的分离关注原则。

这听起来很矛盾：只有知道了更多细节才能提取信息，但是原则却是模块和组件分离关注。不过我们还有其他绑定事件的方式，可以解决这个矛盾。

---

方法3

使用模板引用变量，直接进行事件绑定
语法：<HtmlElement     #名称     (DOM事件)= “事件”> <HtmlElement>
举例：绑定用户输入事件

Angular 的模板引用变量提供了从模块中直接访问元素的能力。 在标识符前加上井号 (#) 就能声明一个模板引用变量。

@Component({  selector: 'loop-back',  template: `    <input #box (keyup)="0">    <p>{{box.value}}</p>  `})export class LoopbackComponent { }

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

但是这个模板完全是独立的。它没有绑定到组件，组件也没做任何事情。

在输入框中输入，就会看到每次按键时，显示也随之更新了。

除非你绑定一个事件，否则这将完全无法工作。
只有在应用做了些异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）。本例代码将keyup事件绑定到了数字0，这是可能是最短的模板语句。 虽然这个语句不做什么，但它满足 Angular 的要求，所以 Angular 将更新屏幕。

从模板变量获得输入框比通过$event对象更加简单。 下面的代码重写了之前keyup示例，它使用变量来获得用户输入。

@Component({  selector: 'key-up2',  template: `    <input #box (keyup)="onKey(box.value)">    <p>{{values}}</p>  `})export class KeyUpComponent_v2 {  values = '';  onKey(value: string) {    this.values += value + ' | ';  }}

这个方法最漂亮的一点是：组件代码从视图中获得了干净的数据值。再也不用了解$event变量及其结构了。

按键事件过滤（通过key.enter）

(keyup)事件处理器监听每一次按键。 有时只在意回车键，因为它标志着用户结束输入。 解决这个问题的一种方法是检查每个$event.keyCode，只有键值是回车键时才采取行动。

更简单的方法是：绑定到 Angular 的keyup.enter 模拟事件。 然后，只有当用户敲回车键时，Angular 才会调用事件处理器。

@Component({  selector: 'key-up3',  template: `    <input #box (keyup.enter)="onEnter(box.value)">    <p>{{value}}</p>  `})export class KeyUpComponent_v3 {  value = '';  onEnter(value: string) { this.value = value; }}

下面展示了它是如何工作的。

失去焦点事件（blur）

前上例中，如果用户没有先按回车键，而是移开了鼠标，点击了页面中其它地方，输入框的当前值就会丢失。 只有当用户按下了回车键候，组件的values属性才能更新。

下面通过同时监听输入框的回车键和失去焦点事件来修正这个问题。

@Component({  selector: 'key-up4',  template: `    <input #box      (keyup.enter)="update(box.value)"      (blur)="update(box.value)">    <p>{{value}}</p>  `})export class KeyUpComponent_v4 {  value = '';  update(value: string) { this.value = value; }}

参考资料：
Angular2中文官网