事件繫結link

Event bindinglink

透過事件繫結，你可以偵聽並響應使用者操作，例如擊鍵、滑鼠移動、點選和觸控。

Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

繫結到事件link

Binding to eventslink

要繫結到事件，請使用 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().

      
        content_copy
      
      <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 自訂事件link

Custom events with EventEmitterlink

指令通常使用 Angular 的 EventEmitter 引發自訂事件，如下所示。

Directives typically raise custom events with an Angular EventEmitter as follows.

1. 該指令建立一個 EventEmitter 並將其對外暴露為屬性。

   The directive creates an EventEmitter and exposes it as a property.

2. 然後，該指令呼叫 EventEmitter.emit(data) 發出事件，傳入訊息資料，該訊息資料可以是任何東西。

   The directive then calls EventEmitter.emit(data) to emit an event, passing in message data, which can be anything.

3. 父指令透過繫結到該屬性來監聽事件，並透過傳入的 $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.

      
        content_copy
      
      <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.

      
        content_copy
      
      // 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.

      
        content_copy
      
      <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）link

Determining an event targetlink

為了確定事件的目標，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.

      
        content_copy
      
      <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.

下一步是什麼link

What's nextlink

關於事件繫結工作原理的更多資訊，請參閱事件繫結工作原理。

For more information on how event binding works, see How event binding works.