事件繫結
Event binding
透過事件繫結,你可以偵聽並響應使用者操作,例如按鍵、滑鼠移動、點選和觸控。
Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
包含本指南中的程式碼段的工作示例,參見
See the
繫結到事件
Binding to events
要繫結到事件,請使用 Angular 的事件繫結語法。此語法由等號左側括號內的目標事件名和右側引號內的範本語句組成。在下面的示例中,目標事件名是 click
,範本語句是 onSave()
。
To bind to an event you use the Angular event binding syntax. This syntax consists of a target event name within parentheses to the left of an equal sign, and a quoted template statement to the right. In the following example, the target event name is click
and the template statement is onSave()
.
<button (click)="onSave()">Save</button>
事件繫結偵聽按鈕的單擊事件,並在發生單擊時呼叫元件的 onSave()
。
The event binding listens for the button's click events and calls the component's onSave()
method whenever a click occurs.
使用 EventEmitter
自訂事件
Custom events with EventEmitter
指令通常使用 Angular 的 EventEmitter 引發自訂事件,如下所示。
Directives typically raise custom events with an Angular EventEmitter as follows.
該指令建立一個
EventEmitter
並將其對外暴露為屬性。The directive creates an
EventEmitter
and exposes it as a property.然後,該指令呼叫
EventEmitter.emit(data)
發出事件,傳入訊息資料,該訊息資料可以是任何東西。The directive then calls
EventEmitter.emit(data)
to emit an event, passing in message data, which can be anything.父指令透過繫結到該屬性來監聽事件,並透過傳入的
$event
物件接收資料。Parent directives listen for the event by binding to this property and accessing the data through the
$event
object.
考慮一個 ItemDetailComponent
,它會顯示條目資訊並響應使用者操作。儘管 ItemDetailComponent
顯示了一個刪除按鈕,但它並不包含刪除英雄的功能。它只會引發一個報告使用者要求刪除的事件。
Consider an ItemDetailComponent
that presents item information and responds to user actions. Although the ItemDetailComponent
has a delete button, it doesn't contain the functionality to delete the hero. It can only raise an event reporting the user's delete request.
<img src="{{itemImageUrl}}" [style.display]="displayNone">
<span [style.text-decoration]="lineThrough">{{ item.name }}
</span>
<button (click)="delete()">Delete</button>
該元件定義了一個 deleteRequest
返回 EventEmitter
的屬性。當用戶單擊 Delete 時,該元件將呼叫 delete()
方法,讓這個 EventEmitter
發出 Item
物件。
The component defines a deleteRequest
property that returns an EventEmitter
. When the user clicks Delete, the component invokes the delete()
method, telling the EventEmitter
to emit an Item
object.
// 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
事件,如下所示。
The hosting parent component binds to the deleteRequest
event of the ItemDetailComponent
as follows.
<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
當 deleteRequest
事件觸發時,Angular 就會以該條目為引數呼叫其父元件的 deleteItem()
。
When the deleteRequest
event fires, Angular calls the parent component's deleteItem()
method with the item.
確定事件目標(target)
Determining an event target
為了確定事件的目標,Angular 會檢查目標事件的名稱是否與已知指令的事件屬性匹配。在以下示例中,Angular 會檢查 myClick
是否來自自訂指令 ClickDirective
的事件。
To determine an event target, Angular checks if the name of the target event matches an event property of a known directive. In the following example, Angular checks to see if myClick
is an event on the custom ClickDirective
.
<h4>myClick is an event on the custom ClickDirective:</h4>
<button (myClick)="clickMessage=$event" clickable>click with myClick</button>
{{clickMessage}}
如果目標事件名稱 myClick
未能匹配元素上的事件或 ClickDirective
的輸出屬性,則 Angular 將報告“未知指令”錯誤。
If the target event name, myClick
fails to match an element event or an output property of ClickDirective
, Angular reports an "unknown directive" error.
下一步是什麼
What's next
關於事件繫結工作原理的更多資訊,請參閱事件繫結工作原理。
For more information on how event binding works, see How event binding works.