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 Spartacus cxFocus增添了refresh Focus功能后的一些考虑的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。