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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的SAP Spartacus unit detail 页面显示后自动 focus 设置的原理的全部內容，希望文章能夠幫你解決所遇到的問題。

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