Angualr 8 事件綁定

通常格式

(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 顯然更加適合