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