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 显然更加适合


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

查看所有标签

猜你喜欢:

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

Tales from Facebook

Tales from Facebook

Daniel Miller / Polity Press / 2011-4-1 / GBP 55.00

Facebook is now used by nearly 500 million people throughout the world, many of whom spend several hours a day on this site. Once the preserve of youth, the largest increase in usage today is amongst ......一起来看看 《Tales from Facebook》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具