• ngAfterViewInit Hook: 負(fù)責(zé)視圖渲染完畢后，執(zhí)行handleFocus來(lái)使元素得到focus

• nOnChanges: 當(dāng)配置的refreshFocus指向的Component 屬性發(fā)生變化時(shí)觸發(fā)，刷新focus

兩個(gè)hook的作用不一樣。

因?yàn)檎鎸?shí)的使用場(chǎng)景中，refreshFocus指向的一般都是Component模型的uid或者key，不會(huì)initial，故單元測(cè)試MockComponent里兩個(gè)元素的初始值，我也沒(méi)有賦成"", 而是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.

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus cxFocus增添了refresh Focus功能后的一些考虑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。