angular2系统学习 - 用户输入

1.通过事件获取用户输入

当我们想获取用户输入时，首先想到的就是事件。通过事件我们可以获取event对象，然后通过event对象可以获取元素及事件的一切信息。

onClickItem($event: any){
    let el = $event.target;
    ...
}

缺点
暴露太多信息，我们只想要目标元素，但还获取了event对象的其他信息。

下面将介绍如何用模板引用变量来解决这个问题。

2.从一个模板引用变量中获得用户输入

在ng2中，还有另一种获取用户数据的方式：使用 Angular 的模板引用变量。 这些变量提供了从模块中直接访问元素的能力。 在标识符前加上井号 (#) 就能声明一个模板引用变量。

template:

<input #box (keyup)="onClickItem(box.value)"/>

这里直接用box来引用input元素本身，方法直接传入我们需要的值，不再需要获取包含很多我们不需要信息的event。

3.按键事件过滤

当我们监控用户输入事件时，有事只想监听回车按下事件，这代表用户已经输入完成。常规思路，我们会绑定keydown事件，然后在事件内先判断按下的key是否是我们需要的回车，如果不是则返回。

这种做法实在是麻烦，ng2为我们提供了更简便的方法来实现。

<input (keyup.enter)="onEnter(box.value)"/>

这样我们非常简单的就做到了至监听input的enter up事件。