SAP Spartacus unit detail 頁面顯示后自動 focus 設置的原理

這個自動 focus 設置的效果是：我們從 Spartacus Unit list 頁面，隨便選擇一行，進入明細頁面之后：

鍵盤 focus 會自動停留在 detail 頁面(下圖右邊紅色矩形框內)第一個 focusable 的元素上：

敲回車試試：

發現 (i) icon 是 unit 明細頁面第一個 focusable 的元素。

這個功能的實現原理：在 unit 明細頁面，即 unit-details.component.html 里，將 cx-org-card 元素里施加 cxFocus, 自動刷新(refreshFocus)的條件為：當 model 發生變化時。

cxFocus 的實現是很 clean 的，因為自動 focus，從語義上來說，還是應該讓 auto focus Directive 來負責實現。

和增強之前的 autofocus 相比，refresh autofocus 的增強主要在于 ngOnChanges hook 的實現：

頁面第一個 fosuable 的元素，打印在控制臺如下：

window-ref.ts 里的 isBrowser API，封裝的是 Angular 標準 API，isPlatformBrowser:

來自 @angular/common:

isBrowser(): boolean { // TODO(#11133): Remove condition when platformId will be always provided return this.platformId ? isPlatformBrowser(this.platformId) : typeof window !== 'undefined'; }

這是 @angular/common 里標準的 api：

https://angular.io/api/common/isPlatformBrowser

然后單擊進去之后，看不到具體的實現代碼：

@publicApi

export declare function, 其用法解釋：

Declare vs. var

var creates a new variable. declare is used to tell TypeScript that the variable has been created elsewhere. If you use declare, nothing is added to the JavaScript that is generated - it is simply a hint to the compiler.

For example, if you use an external script that defines var externalModule, you would use declare var externalModule to hint to the TypeScript compiler that externalModule has already been set up

export declare class Action{ ... }

The class’s real implementation is probably in somewhere else - maybe a .js file.

declare 提示了 Action 的實際實現一定在另一個位置，很可能是某個 .js 文件里。

TypeScript 幫助文檔里對 declare 關鍵字的解釋：

The TypeScript declare keyword is used to declare variables that may not have originated from a TypeScript file.

TypeScript 的 declare 關鍵字，用于聲明一個變量，其原始定義可能并不是來自一個 TypeScript 文件。

For example, lets imagine that we have a library called myLibrary that doesn’t have a TypeScript declaration file and have a namespace called myLibrary in the global namespace. If you want to use that library in your TypeScript code, you can use the following code:

declare var myLibrary;

The type that the TypeScript runtime will give to myLibrary variable is the any type. The problem here is that you won’t have Intellisense for that variable in design time but you will be able to use the library in your code.

Another option to have the same behavior without using the declare keyword is just using a variable with the any type:

var myLibrary: any;

Both of the code examples will result in the same JavaScript output but the declare example is more readable and expresses an ambient declaration.

報錯：uncaught referenceError: myLibrary is not defined

JavaScript TypeScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。