首页 > 其他 > 详细

【2020-02-07】组件与模板 - 用户输入

时间:2020-02-07 17:38:50      阅读:54      评论:0      收藏:0      [点我收藏+]

用户输入

当用户点击链接、按下按钮或者输入文字时,这些用户动作都会产生DOM事件。

本章解释如何使用Angular事件绑定语法把这些事件绑定到事件处理器

绑定到用户输入事件

技术分享图片

 

 通过$event对象取得用户输入

DOM事件可以携带可能对组件有用的信息

技术分享图片

 

 传入$event是靠不住的做法:

类型化事件对象揭露了重要的一点,即反对把整个DOM事件传到方法中,因为这样组件会知道太多模板的信息。只有当它知道更多本不应了解的HTML 实现细节时,它才能提取信息。这就违反了模板(用户看到的)和组件(应用如何处理用户数据)之间的分离关注原则

下面则介绍如何用模板引用变量来解决此问题

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

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

技术分享图片

 

 按事件过滤(通过key.enyer)

(keyup)事件处理器监听每一次按键。有时只在意回车键,因为它标志着用户结束输入。

解决这个问题的一种方法是检查每个$event.keyCode, 只有键值是回车键时才采取行动

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

失去焦点事件(blur)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

方法

【2020-02-07】组件与模板 - 用户输入

原文:https://www.cnblogs.com/QQ-lala/p/12272982.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!