Angular 事件綁定
一般格式
(event)="模板語句"
例如:
(click)="onClick()"
(click)="hidden=false"
兩種寫法都是合法的
$event 對象
$event 對象為 DOM 事件對象菌湃,一般經(jīng)常使用到 event.target.value 獲取當(dāng)前元素的值。
$event 包含大量的信息遍略,而其實絕大多數(shù)情況下惧所,我們僅僅需要使用 event.target.value骤坐,因此,應(yīng)該盡量避免使用 $event 傳遞值下愈。
當(dāng)你使用 $event 對象時需要注意纽绍, $event 對象總是有一個對應(yīng)的類型,所以并不推薦到處使用 any 類型來偷懶势似,如果不知道類型所對應(yīng)的名稱是什么拌夏,可以嘗試打印 typeof event 查看。
使用 $event 的小例子:
<input (keyup)="onKey($event)">
#var 模板引用變量
我們在 Angular 組件 中已經(jīng)使用過了 模板引用變量履因。
模板引用變量的感覺比較像 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);
}
當(dāng)使用我們通過 emit 傳遞的值時, $event 顯然更加適合