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

這個自動 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的原創文章，盡在："汪子熙":