SAP Spartacus lock directive锁住元素所有子元素及设置FOCUS_GROUP

FOCUS_GROUP_ATTR: data-cx-focus-group:

这个属性是动态添加上去的吗？
如何判断哪个元素应该被focus，在auto-focus.service.ts里的selectFocusUtil里实现：

select-focus.util.ts的selector，来自focus directive的配置config.autofocus, 只要focus传一个字符串，就将其当成selector：

如果autofucs是一个字符串，就用来当成selector，否则用硬编码的[autofocus]，即查找HTML模板里添加了autofocus属性的元素。

看这个语义：如果整个组需要lock，并且focus directive配置文件传入了group参数，则将其子元素全部设置上data-cx-focus-group属性，值为传入的group配置参数。

虽然调用了focus，但是没有任何反应，因为还未出现在viewport里：

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

SAP Spartacus lock directive锁住元素所有子元素及设置FOCUS_GROUP_ATTR的行为相关推荐

[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
SAP Spartacus autofocus directive，如何锁住使用了directive的元素本身？
如果autofocus传字符串:host进去,就可以锁住自身.
SAP Spartacus Popover Directive 构造函数的用途分析
该构造函数位于文件 popover.directive.ts 里: 第 11 行 cxPopOver Directive 施加到 button 元素上之后,运行时,cxPopOver Directiv ...
SAP Spartacus lock focus Directive的工作原理示意图
源代码: import {AfterViewInit,Directive,ElementRef,EventEmitter,HostBinding,HostListener,OnInit,Output, ...
SAP Spartacus lock focus directive如何判断有没有focusable children
hasFocusableChildren:返回boolean focusable:返回HTMLElement数组 service的原本类型是LockFocusService 没有任何实现: 再往上看T ...
SAP Spartacus cxPageTemplateStyle Directive的作用
源代码如下图所示: cxPageTemplateStyle指令的作用是,给host元素添加对应的css类: 如果没有header和LandingPage2Template这两个css,Spartacu ...
SAP Spartacus outlet.directive.ts里this.templateRef的来源
如源代码所示: 这个templateRef是构造函数注入进去的: 如图: 这里谜底揭开了.只有加入cxOutlet之后,我们自定义实现Outlet.directive.ts里的create方法,下面这 ...
SAP Spartacus autofocus Directive的失败的单元测试 - 2021年1月13日 1.1
我现在把setDefaultConfiguration移到ngAfterViewInit里了: 所以对于这段代码: <div cxAutoFocus id="a"> a ...
SAP Spartacus cxFocus Directive施加后导致tabindex为-1的副作用研究
我第一次看到下图第44行代码时,以为仅仅是一个简单的赋值操作,把requiredTabindex的值赋成-1: 后来发现,这个requiredTabindex不是一个字段的值,而是一个set函数的名称 ...

SAP Spartacus lock directive锁住元素所有子元素及设置FOCUS_GROUP_ATTR的行为

SAP Spartacus lock directive锁住元素所有子元素及设置FOCUS_GROUP_ATTR的行为相关推荐

最新文章

热门文章