这个自动 focus 设置的效果是：我们从 Spartacus Unit list 页面，随便选择一行，进入明细页面之后：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210412143307968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)

键盘 focus 会自动停留在 detail 页面(下图右边红色矩形框内)第一个 focusable 的元素上：

![](https://img-blog.csdnimg.cn/img_convert/8ae4ef295f1ca360d19d6f8e188edbcb.png)

敲回车试试：

![](https://img-blog.csdnimg.cn/img_convert/dabac37339a0595dfb3d95a92628f675.png)

发现 (i) icon 是 unit 明细页面第一个 focusable 的元素。

这个功能的实现原理：在 unit 明细页面，即 unit-details.component.html 里，将 cx-org-card 元素里施加 cxFocus, 自动刷新(refreshFocus)的条件为：当 model 发生变化时。

![](https://img-blog.csdnimg.cn/img_convert/470b1beca4a497662e9487de36727de9.png)

cxFocus 的实现是很 clean 的，因为自动 focus，从语义上来说，还是应该让 auto focus Directive 来负责实现。

![](https://img-blog.csdnimg.cn/img_convert/6232c4b9dc31a30018ef450dc62f9640.png)

和增强之前的 autofocus 相比，refresh autofocus 的增强主要在于 ngOnChanges hook 的实现：

![](https://img-blog.csdnimg.cn/img_convert/c3bbc06b3da8ac39900da4eb122e9a2d.png)

页面第一个 fosuable 的元素，打印在控制台如下：

![](https://img-blog.csdnimg.cn/img_convert/d440ff4fe97226e2b66c8260685185ce.png)

ITPub博客

SAP Spartacus unit detail 页面显示后自动 focus 设置的原理

最新文章