Angular之旅tip：获取输入的方式

Angular之所以非常受人瞩目，不得不说其强大的模板处理能力，尽管jQurey库对DOM元素和事件的操作异常简单。不过在分离视图和业务层的领域中，Angular的template扮演了很重要的作用。所以这篇会解释关于获取用户输入的Angular的方法：

输入文本内容，点击鼠标，都会有DOM事件的发生，与jQuery同样，A也有直接处理DOM事件的能力。

方法一：绑定 DOM 事件并且通过$event对象取得用户输入

方法基本与jQuery相同，不过监听器需要用一对圆括号包裹起来，比如 (keyup)=" onKeyboard($event)"等等，当键盘事件被触发，组件会相应地处理keyup事件，同时从$event获取DOM对象。不再累述。



方法之二：从模板变量中获得用户输入

A除了常规的对DOM事件进行响应外，还有另一种方式。就是把模板的元素变量化，就好像赋予了ID标签，并且在模板中直接引用，直接取值，这就是模板变量。如下图：



<input #box (keyup)="0">中的box就是input标签的模板变量。而插值表达式中的box.value便是直接调用的结果。当然，你需要注意的是“
(keyup)=’0‘ ”是必须的。

下节的tip，我将详细得对Angular表单进行提炼说明，“表单是商业应用的支柱，我们用它来执行登录、求助、下单、预订机票、安排会议，以及不计其数的其它数据录入任务。”