Angular 8 事件绑定

最新推荐文章于 2023-01-30 09:57:44 发布

原创最新推荐文章于 2023-01-30 09:57:44 发布 · 6k 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

5 篇文章

订阅专栏

本文围绕 Angular 展开，介绍了事件绑定的一般格式、$event 对象、#var 模板引用变量等内容。指出 $event 对象为 DOM 事件对象，使用时应避免传递大量值，且要注意类型。还提及绑定 “enter 事件” 和自定义组件事件，说明不同场景下 $event 的适用性。

(event)="模板语句"

例如：

(click)="onClick()"

(click)="hidden=false"

两种写法都是合法的

$event 对象为 DOM 事件对象，一般经常使用到 event.target.value 获取当前元素的值。

$event 包含大量的信息，而其实绝大多数情况下，我们仅仅需要使用 event.target.value，因此，应该尽量避免使用 $event 传递值。

当你使用 $event 对象时需要注意， $event 对象总是有一个对应的类型，所以并不推荐到处使用 any 类型来偷懒，如果不知道类型所对应的名称是什么，可以尝试打印 typeof event 查看。

使用 $event 的小例子：

<input (keyup)="onKey($event)">

我们在 Angular 组件中已经使用过了模板引用变量。

模板引用变量的感觉比较像 DOM 元素变量化。

<input #box (keyup)="onKey(box.value)">

如此就可以将 box 作为 DOM 元素本身来使用了，相对于 $event ，代码更加 “可读”。

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