這個自動 focus 設(shè)置的效果是：我們從 Spartacus Unit list 頁面，隨便選擇一行，進入明細頁面之后：

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

敲回車試試：

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

這個功能的實現(xiàn)原理：在 unit 明細頁面，即 unit-details.component.html 里，將 cx-org-card 元素里施加 cxFocus, 自動刷新(refreshFocus)的條件為：當 model 發(fā)生變化時。

cxFocus 的實現(xiàn)是很 clean 的，因為自動 focus，從語義上來說，還是應(yīng)該讓 auto focus Directive 來負責實現(xiàn)。

和增強之前的 autofocus 相比，refresh autofocus 的增強主要在于 ngOnChanges hook 的實現(xiàn)：

頁面第一個 fosuable 的元素，打印在控制臺如下：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。