angular2系统学习 - 用户输入
2017-01-11 18:01
232 查看
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事件。
相关文章推荐
- Angular学习(十六)——用指令修改DOM/校验用户输入
- Angular2学习笔记.3、通过模板调用Controller事件实现用户输入和显示,UserInput
- asp.net2.0系统用户验证学习笔记
- ASP.NET学习手记:验证用户表单输入
- Android用户输入系统和移植内容概要
- linux学习笔记之小谈时钟时间,用户CPU时间,系统CPU时间
- Andorid系统开发之--用户输入系统之概述
- 如果做到安全的系统之验证用户输入.
- 让用户减少学习成本——后台系统交互心得(二)(原创理论)
- android用户输入系统详细说明
- CAD二次开发学习笔记八(用户输入)
- 移动用户计费系统学习(一)
- Atlas学习手记(26):使用Validators验证用户输入
- 用pam解决用户输入三次错误密码后禁止登陆系统,2分钟后自动解禁用户
- 将一串数字转化为中文字符串,使用 C# 将数字转换成大写人民币 (例如:用户输入2300,系统就会显示两千三百元 )
- php学习笔记:第八节--表单和用户输入,$_GET,$_POST
- ASP.NET学习手记:验证用户表单输入
- Windows系统内核模态和用户模态一点学习心得
- UNIX环境高级编程学习之第六章系统数据文件和信息 用链表的形式读出一个服务器的远程用户登入登出信息
- Android用户输入系统和移植内容概要