SAP Spartacus AutoFocus directive的一个例子

有两种变体，如果不加方括号，直接传字符串给cxFocus，字符串内容会被当成persistent key处理；否则，传一个对象给[cxFocus]:

<div [cxFocus]="{ autofocus: true, group: 'address-book-dialog' }"><button class="close">Jerry Button</button><input class="value" cxFocus="key-1" /><input class="value" [cxFocus]="{ key: 'key-1' }" />
</div>

auto-focus.directive.ts的AfterViewInit里手动调用不含参数的handleFocus:

close button被focus了。

进入父类persist-focus.directive.ts的handleFocus方法，试图设置persistent key：

group有值，而key没有：

这是一个map，用于记录focus信息：

Jerry Button果然被focus了：

给按钮增添一个autofocus的属性能实现同样的效果：

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

SAP Spartacus AutoFocus directive的一个例子相关推荐

SAP Spartacus lazy load 的一个例子 - User Module
package.json 里面能发现 user 和 asm 是单独安装的: 之后,会出现在工程文件夹 Spartacus/features 文件夹下面: 在 user-feature.module.t ...
SAP Spartacus autofocus Directive的失败的单元测试 - 2021年1月13日 1.1
我现在把setDefaultConfiguration移到ngAfterViewInit里了: 所以对于这段代码: <div cxAutoFocus id="a"> a ...
SAP Spartacus autofocus directive，如何锁住使用了directive的元素本身？
如果autofocus传字符串:host进去,就可以锁住自身.
SAP Spartacus SplitViewComponent Migration 的一个具体例子
参考 Pull Request:https://github.com/SAP/spartacus/pull/9946/files 首先在 docs/migration/3.0_md 里添加文字描述: ...
SAP Spartacus Popover Directive 构造函数的用途分析
该构造函数位于文件 popover.directive.ts 里: 第 11 行 cxPopOver Directive 施加到 button 元素上之后,运行时,cxPopOver Directiv ...
自己动手开发SAP Spartacus focus Directive的单元测试
在已有的单元测试代码,加了这个div标签之后就报错了: 报错:this.service.findFirstFocusable is not a function: at FocusDirective. ...
SAP Spartacus lock directive锁住元素所有子元素及设置FOCUS_GROUP_ATTR的行为
FOCUS_GROUP_ATTR: data-cx-focus-group: 这个属性是动态添加上去的吗? 如何判断哪个元素应该被focus,在auto-focus.service.ts里的selec ...
使用url参数传递SAP Analytics Cloud filter的一个例子
例子如下: https:///sap/fpa/ui/tenants/008/app.html#;view_id=story;storyId=E1E3EAF366F3CCAD5AD936E67714AF ...
SAP Spartacus PersistFocus Directive是采取怎样的数据结构来存储focus信息的
自动focus的directive会在ngAfterViewInit里调用不含输入参数的handleFocus: autofocus 的directive AfterViewInit里会handleF ...

SAP Spartacus AutoFocus directive的一个例子

SAP Spartacus AutoFocus directive的一个例子相关推荐

最新文章

热门文章