Angular2.0 基础: User Input

1.Angular 2.0 中的变量

对输入值的获取，我们可以通过$event 来获取，也可以通过变量来获取。

template: `<input (keyup)="onKey($event)"><p>{{values}}</p>`

即，当user 按下并释放一个按钮是，就会触发keyup 事件，Angular在$event 变量提供一个相应的DOM事件对象，

export class KeyUpComponent_v1 {values = '';onKey(event:any) { // without type infothis.values += event.target.value + ' | ';}
}

$event 对象的属性取决于DOM 事件的类型。而所有的标准DOM事件对象都有一个target 属性，
上例将$event转换为any类型。这样简化了代码，但是有成本。没有任何类型信息能够揭示事件对象的属性，防止简单的错误

传入 $event 是靠不住的做法

Passing $event is a dubious practice

类型化事件对象揭露了重要的一点，即反对把整个 DOM 事件传到方法中，因为这样组件会知道太多模板的信息。

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

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

如上图的box 就是一个变量

转载于:https://www.cnblogs.com/taoyoung/p/6147944.html

Angular2.0 基础: User Input相关推荐

Angular2.0 基础： Form
对于Angular2.0 的Form表单中的隐藏和验证,个人觉得还是挺有意思的. 1.通过ngModel 跟踪修改状态与验证. 在表单中使用 ngModel 可以获得更多的控制权,包括一些常用的验证. ...
python 内存溢出能捕获吗_从0基础学习Python (19)[面向对象开发过程中的异常（捕获异常～相关）]...
从0基础学习Python (Day19) 面向对象开发过程中的=>异常什么是异常当程序在运行过程中出现的一些错误,或者语法逻辑出现问题,解释器此时无法继续正常执行了,反而出现了一些错误的 ...
Angular2.0快速开始
目前Angular2.0开发者预览版已经发布,和Angular1.x相比,发生了很多颠覆性的变化,随后Angular2团队在官网上给出了一个5分钟快速开始的教程,用于编写一个hello world级别 ...
qq纵横四海源码_【0基础】纵横中文网python爬虫实战
原文在此~ [0基础]纵横中文网python爬虫实战mp.weixin.qq.com 大家好,我是你们的机房老哥! 在粉丝群的日常交流中,爬虫是比较常见的话题.python最强大的功能之一也是爬虫. ...
android checkbox监听另一个checkbox选中和不选中_一个真正0基础小白学习前端开发的心路历程...
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
form表单中根据值判断是否disabled_Java 0基础入门（Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景百度搜索 5173注册如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
一个真正0基础小白学习前端开发的心路历程
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
树莓派 GPIO基础输入input
树莓派 GPIO基础输入input RPi.GPIO 模块程序包提供了一个在 Raspberry Pi 中控制 GPIO 的类. 使用步骤: 1. 导入模块 import RPi.GPIO as G ...

Angular2.0 基础: User Input

传入 $event 是靠不住的做法

Passing $event is a dubious practice

Angular2.0 基础: User Input相关推荐

最新文章

热门文章