W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
通過事件綁定,你可以偵聽并響應(yīng)用戶操作,例如按鍵、鼠標(biāo)移動、點(diǎn)擊和觸摸。
包含本指南中的代碼段的工作示例,參見現(xiàn)場演練 / 下載范例。
要綁定到事件,請使用 Angular 的事件綁定語法。此語法由等號左側(cè)括號內(nèi)的目標(biāo)事件名和右側(cè)引號內(nèi)的模板語句組成。在下面的示例中,目標(biāo)事件名是 ?click
?,模板語句是 ?onSave()
? 。
<button (click)="onSave()">Save</button>
事件綁定偵聽按鈕的單擊事件,并在發(fā)生單擊時調(diào)用組件的 ?onSave()
?。
Angular 還支持被動事件偵聽器。例如,使用以下步驟使?jié)L動事件變?yōu)楸粍拥摹?/p>
src
?目錄下創(chuàng)建一個文件 ?zone-flags.ts
? 。(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
src/polyfills.ts
? 文件中,在導(dǎo)入 zone.js 之前,先導(dǎo)入新創(chuàng)建的 ?zone-flags
? 。import './zone-flags';
import 'zone.js'; // Included with Angular CLI.
在這些步驟之后,如果你為 ?scroll
?事件添加事件偵聽器,偵聽器就會是 ?passive
?的。
指令通常使用 Angular 的 ?EventEmitter
?引發(fā)自定義事件,如下所示。
EventEmitter
?并將其對外暴露為屬性。
EventEmitter.emit(data)
? 發(fā)出事件,傳入消息數(shù)據(jù),該消息數(shù)據(jù)可以是任何東西。
$event
? 對象接收數(shù)據(jù)。
考慮一個 ?ItemDetailComponent
?,它會顯示條目信息并響應(yīng)用戶操作。盡管 ?ItemDetailComponent
?顯示了一個刪除按鈕,但它并不包含刪除英雄的功能。它只會引發(fā)一個報告用戶要求刪除的事件。
<img src="{{itemImageUrl}}" [style.display]="displayNone">
<span [style.text-decoration]="lineThrough">{{ item.name }}
</span>
<button (click)="delete()">Delete</button>
該組件定義了一個 ?deleteRequest
?返回 ?EventEmitter
?的屬性。當(dāng)用戶單擊 Delete 時,該組件將調(diào)用 ?delete()
? 方法,讓這個 ?EventEmitter
?發(fā)出 ?Item
?對象。
// This component makes a request but it can't actually delete a hero.
@Output() deleteRequest = new EventEmitter<Item>();
delete() {
this.deleteRequest.emit(this.item);
this.displayNone = this.displayNone ? '' : 'none';
this.lineThrough = this.lineThrough ? '' : 'line-through';
}
宿主父組件將綁定到 ?ItemDetailComponent
?的 ?deleteRequest
?事件,如下所示。
<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
當(dāng) ?deleteRequest
?事件觸發(fā)時,Angular 就會以該條目為參數(shù)調(diào)用其父組件的 ?deleteItem()
?。
為了確定事件的目標(biāo),Angular 會檢查目標(biāo)事件的名稱是否與已知指令的事件屬性匹配。在以下示例中,Angular 會檢查 ?myClick
?是否來自自定義指令 ?ClickDirective
?的事件。
<h4>myClick is an event on the custom ClickDirective:</h4>
<button (myClick)="clickMessage=$event" clickable>click with myClick</button>
{{clickMessage}}
如果目標(biāo)事件名稱 ?myClick
?未能匹配元素上的事件或 ?ClickDirective
?的輸出屬性,則 Angular 將報告“未知指令”錯誤。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: