Angualr 8 事件绑定
栏目: JavaScript · 发布时间: 5年前
内容简介:例如:两种写法都是合法的$event 对象为 DOM 事件对象,一般经常使用到 event.target.value 获取当前元素的值。
一般格式
(event)="模板语句"
例如:
(click)="onClick()" (click)="hidden=false"
两种写法都是合法的
$event 对象
$event 对象为 DOM 事件对象,一般经常使用到 event.target.value 获取当前元素的值。
$event 包含大量的信息,而其实绝大多数情况下,我们仅仅需要使用 event.target.value,因此,应该尽量避免使用 $event 传递值。
当你使用 $event 对象时需要注意, $event 对象总是有一个对应的类型,所以并不推荐到处使用 any 类型来偷懒,如果不知道类型所对应的名称是什么,可以尝试打印 typeof event 查看。
使用 $event 的小例子:
<input (keyup)="onKey($event)">
var 模板引用变量
我们在 Angular 组件 中已经使用过了 模板引用变量。
模板引用变量的感觉比较像 DOM 元素变量化。
<input #box (keyup)="onKey(box.value)">
如此就可以将 box 作为 DOM 元素本身来使用了,相对于 $event ,代码更加 “可读”。
绑定 “enter 事件”
<input #box (keyup.enter)="onEnter(box.value)">
自定义组件事件
.html
<input #textbox type="text" (keyup)="onKeyUp(textbox.value)">
.ts
@Output("onKeyUp") keyUp: EventEmitter<string> = new EventEmitter(); public onKeyUp(v: string): void { console.log(v); }
使用
.html
<b-input (onKeyUp)="onKeyUp($event)"></b-input>
.ts
public onKeyUp(v: string): void { console.log(v); }
当使用我们通过 emit 传递的值时, $event 显然更加适合
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法竞赛入门经典
刘汝佳、陈锋 / 2012-10 / 52.80元
《算法竞赛入门经典:训练指南》是《算法竞赛入门经典》的重要补充,旨在补充原书中没有涉及或者讲解得不够详细的内容,从而构建一个较完整的知识体系,并且用大量有针对性的题目,让抽象复杂的算法和数学具体化、实用化。《算法竞赛入门经典:训练指南》共6章,分别为算法设计基础、数学基础、实用数据结构、几何问题、图论算法与模型和更多算法专题,全书通过近200道例题深入浅出地介绍了上述领域的各个知识点、经典思维方式......一起来看看 《算法竞赛入门经典》 这本书的介绍吧!