SAP Spartacus unit detail 頁面顯示後自動 focus 設定的原理

注销發表於2021-04-17

這個自動 focus 設定的效果是:我們從 Spartacus Unit list 頁面,隨便選擇一行,進入明細頁面之後:

在這裡插入圖片描述

鍵盤 focus 會自動停留在 detail 頁面(下圖右邊紅色矩形框內)第一個 focusable 的元素上:

敲回車試試:

發現 (i) icon 是 unit 明細頁面第一個 focusable 的元素。

這個功能的實現原理:在 unit 明細頁面,即 unit-details.component.html 裡,將 cx-org-card 元素裡施加 cxFocus, 自動重新整理(refreshFocus)的條件為:當 model 發生變化時。

cxFocus 的實現是很 clean 的,因為自動 focus,從語義上來說,還是應該讓 auto focus Directive 來負責實現。

和增強之前的 autofocus 相比,refresh autofocus 的增強主要在於 ngOnChanges hook 的實現:

頁面第一個 fosuable 的元素,列印在控制檯如下:

更多Jerry的原創文章,盡在:"汪子熙":

相關文章