天天看點

Angular 事件綁定文法在 SAP Spartacus Popover Component 中的一個應用

要綁定到事件,請使用 Angular 的事件綁定文法。此文法由等号左側括号内的目标事件名和右側引号内的模闆語句組成。在下面的示例中,目标事件名是 click ,模闆語句是 onSave() 。

Angular 事件綁定文法在 SAP Spartacus Popover Component 中的一個應用

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

Angular 事件綁定文法在 SAP Spartacus Popover Component 中的一個應用

Spartacus 的一個例子:

Angular 事件綁定文法在 SAP Spartacus Popover Component 中的一個應用

$event 是事件對象。

$event 對象通常包含該方法所需的資訊,例如使用者名或圖檔 URL。

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

看這個例子:

Angular 事件綁定文法在 SAP Spartacus Popover Component 中的一個應用

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 上觸發的使用者互動事件,到底是按鈕被滑鼠點選造成的,還是被鍵盤敲擊造成的。

Angular 事件綁定文法在 SAP Spartacus Popover Component 中的一個應用

繼續閱讀