要綁定到事件，請使用 Angular 的事件綁定語法。此語法由等號左側括號內的目標事件名和右側引號內的模板語句組成。在下面的示例中，目標事件名是 click ，模板語句是 onSave() 。

<button (click)="onSave()">Save</button>

事件綁定偵聽按鈕的單擊事件，并在發生單擊時調用組件的 onSave()。

Spartacus 的一個例子：

$event 是事件對象。

$event 對象通常包含該方法所需的信息，例如用戶名或圖片 URL。

目標事件決定了 $event 對象的形態。如果目標事件是來自原生 DOM 元素的，那么 $event 是一個DOM 事件對象，它具有 target 和 target.value 等屬性。

看這個例子：

<input [value]="currentItem.name"(input)="currentItem.name=getValue($event)">

• input 控件的 value，綁定到 Component 的 currentItem.name 屬性。

input 控件的 input 事件，每當觸發時，會把 getValue 返回的結果，賦給 Component 屬性 currentItem.name

這個綁定會在一個上下文中執行該語句，此上下文中包含 DOM 事件對象 $event。

Angular 會通過調用 getValue($event.target) 來獲取更改后的文本，并用它更新 name 屬性。

在模板中，$event.target 的類型只是 EventTarget。在 getValue() 方法中，把此目標轉為 HTMLInputElement 類型，以允許對其 value 屬性進行類型安全的訪問。

Spartacus 的這個例子，展示了如何通過 TypeScript 代碼，判斷 button 上觸發的用戶交互事件，到底是按鈕被鼠標點擊造成的，還是被鍵盤敲擊造成的。

close(event: MouseEvent | KeyboardEvent) {event.preventDefault();if (event instanceof MouseEvent) {this.eventSubject.next(PopoverEvent.CLOSE_BUTTON_CLICK);} else {this.eventSubject.next(PopoverEvent.CLOSE_BUTTON_KEYDOWN);}}

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular 事件绑定语法在 SAP Spartacus Popover Component 中的一个应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。