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 元素本身来使用了,相对于 &dollar;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 传递的值时, &dollar;event 显然更加适合


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

明解C语言(第3版)

明解C语言(第3版)

[日] 柴田望洋 / 管杰、罗勇、杜晓静 / 人民邮电出版社 / 2015-11-1 / 79.00元

本书是日本的C语言经典教材,自出版以来不断重印、修订,被誉为“C语言圣经”。 本书图文并茂,示例丰富,第3版从190段代码和164幅图表增加至205段代码和220幅图表,对C语言的基础知识进行了彻底剖析,内容涉及数组、函数、指针、文件操作等。对于C语言语法以及一些难以理解的概念,均以精心绘制的示意图,清晰、通俗地进行讲解。原著在日本广受欢迎,始终位于网上书店C语言著作排行榜首位。一起来看看 《明解C语言(第3版)》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试