SAP Spartacus里几个和Focus相关的directive的继承关系以及元素focus是如何实现的

cx-table施加的是focus directive：

Focusdirective继承自LockFocusdirective：

TrapFocusdirective继承自TabFocusdirective：

Focus->Lock->Trap->Tab的继承关系，从下图清晰可见：

TrapFocusdirective里接收键盘的keydown事件：

最后还是调用HTML DOM元素原生的querySelectorAll进行查找：

第57行，调用浏览器原生的focus方法：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus里几个和Focus相关的directive的继承关系以及元素focus是如何实现的相关推荐

SAP Spartacus里Commerce后台CMS Component和前台Angular的一一映射关系
在configuration.service.ts的config对象里查看: 路径如下: 高亮的都是CMS Component,这些key的value就是Spartacus里实现的Angular Co ...
SAP Spartacus 里的 icon 设计
同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon 设计,比如下图的 iconTypes.RESET: 需要调用 iconLoader 获取 RESET icon ...
Media Query在SAP Spartacus里的用途
Media queries are useful when you want to modify your site or app depending on a device's general ty ...
SAP Spartacus里的feature module
SAP Spartacus里Component的使用受featureModule控制:
SAP Spartacus 里的 .release-it.json 文件
在 SAP Spartacus package.json 里有一个依赖叫做 release-it: 这个工具的链接:https://github.com/release-it/release-it 这 ...
如何找到 SAP Spartacus 里某个 Component TypeScript 编译后生成的 JavaScript 位置
需求如何找到触发该网络请求的准确代码位置? 从 initiator 里查看调用栈上下文,一点头绪也没有. 找到触发该网络请求的控件的 selector:cx-register 在 Storefron ...
SAP Spartacus 里的 cxOutletRef 指令执行过程分析
先看 cxOutletRef 指令的效果:ng-template 里定义了如下图标 1 区域所示的自定义 UI,通过 cxOutletRef, 将其插入到图标 2 所示的 ProductDetails ...
SAP Spartacus里的localStorage用法
window-ref.ts: get nativeWindow(): Window {return typeof window !== 'undefined' ? window : undefined ...
SAP Spartacus里product数据请求的HTTP url是在哪里维护的
我们打开SAP Spartacus home页面时,能观察到product carousel里待显示的product数据从后台被请求: 随便点开一个url,格式如下: https://jerry.ea ...

SAP Spartacus里几个和Focus相关的directive的继承关系以及元素focus是如何实现的

SAP Spartacus里几个和Focus相关的directive的继承关系以及元素focus是如何实现的相关推荐

最新文章

热门文章