SAP Spartacus cxFocus增添了refresh Focus功能后的一些考虑
-
ngAfterViewInit Hook: 负责视图渲染完毕后,执行handleFocus来使元素得到focus
-
nOnChanges: 当配置的refreshFocus指向的Component 属性发生变化时触发,刷新focus
两个hook的作用不一样。
因为真实的使用场景中,refreshFocus指向的一般都是Component模型的uid或者key,不会initial,故单元测试MockComponent里两个元素的初始值,我也没有赋成"", 而是A和B.
Some background of my latest commit:
- handleFocus method is called twice in different hooks in different focus class, which have different focus:
- in focus.directive.ts, ngOnChanges:
this hook is responsible to refresh focus whenever component property configured in focus configuration ( config.refreshFocus ) is changed.
- in auto-focus.directive.ts, ngOnAfterViewInit:
this hook is called when the view is fully rendered, responsible to auto-focus an element with autofocus = true.
In real scenario, for example when we opened unit list in B2B, click one unit to reach unit detail page(unit-details.component.html), an element marked with [cxFocus]="{ autofocus: true, refreshFocus: model.uid }" will be focused TWICE, one in ngOnChanges and the other one in ngAfterViewInit hook.
- I didn’t implement OnChanges in base-focus.directive.ts, but in focus.directive.ts instead.
The reason is, I checked in base-focus.directive.ts, the ngOnInit hook implemented there has some default logic. So if I implement OnChanges hook in base-focus.directive.ts, I don’t have any default logic to code there, thus will lead to warnings in Visual Studio Code. So I choose to implement OnChanges in focus.directive.ts instead, this is current design in my PR.
相关文章
- SAP CRM Fiori 应用的 Deep Create 行为和实现分析
- 想比较全面地学习 SAP XXX,能指导下从哪儿开始学习吗?
- 在 SAP ABAP Gateway 系统上定义后台系统的 Alias
- SAP UI5 sap.ui.Device.media.initRangeSet 方法的单步调试
- SAP Gateway 在开发系统和生产系统上的缓存控制
- 如何给 SAP ABAP ALV 报表的修改功能添加自定义校验逻辑试读版
- SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍
- 我与 SAP 成都研究院吴院长的二三事
- SAP S/4HANA Group Reporting 功能概述
- SAP QM不常用功能之Automatic Usage Decision
- 澄清一些对 SAP UI5 响应式表格 sap.m.Table 的常见理解误区试读版
- SAP横向纵向打印详解编程语言
- SAP 通过SE54和SM34创建视图簇维护详解编程语言
- SAP OLE中常用的一些方法和属性详解编程语言
- SAP ALV中同一列的不同行显示不同的小数位,并能够总计,小计详解编程语言
- SAP 中的用户类型详解编程语言
- SAP 常用系统函数详解编程语言
- JAVA 调用SAP Webservice 报401详解编程语言
- SAP ABAP —–ABAP 有用的日期FUNCTION详解编程语言
- SAP财务清账原理与方式详解编程语言
- 系统SAP在Linux系统上的开启之旅(sap启动linux)
- SAP vs Oracle:差异点与解析(sap和oracle的区别)
- 转变Oracle SAP实施转变:新的商业革命(oraclesap实施)
- 数据库解决方案如何使用SAP创建Redis数据库(sap怎么创建redis)
- 展望未来Oracle与SAP的合作结盟前景(oracle、sap)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)