SAP Spartacus B2B 列表頁面的 (i) icon popover Component 的聲明位置

SAP Spartacus B2B 頁面的列表頁面，一共有 6 個類似 SAP Fiori Language 里的 tile(磁貼)：

點擊去之后，能看到列表頁面有一個綠色 icon 圖標，點擊之后，彈出一個 Popover Component：

第一個疑問就是：我們需要在 6 個 不同的 tile 對應的列表頁面里，重復定義 6 次 這個 Popover Component 么？

答案是否定的。我們并沒有在 Spartacus 標準代碼里，發現類似 User List Component，這提示我們，無論 User List，還是 Org List，很可能是重用某一個 Spartacus 共享控件，只是在運行時，動態注入了一些 tile specific 特性。

我們這個猜想，從運行時渲染出的 HTML 代碼里得到了印證：User List 的頁面，使用的 Component selector 為 cx-org-list, class 為 orgUser：

而 Org Unit List，使用的同樣是 cx-org-list，區別是 class 為 orgUnit：

selector cx-org-list 對應的 Angular Component 的 template 實現為：list.component.html:

(i) icon 及點擊之后彈出的 Popover Component 的布局和邏輯，就寫在這個 HTML 文件里，且只實現一次：

SAP Spartacus B2B 頁面類似 SAP Fiori Launchpad，共有 6 個 tile(磁貼)，點擊某個磁貼，能跳轉到對應的列表頁面。

路由映射就是指點擊某個 url 之后(例如上圖所示的例子），應該激活哪一個 Angular Component.

例如上圖 User tile，通過 a 標簽實現，點擊之后，會跳轉到其 href 屬性指向的 url：http://localhost:4200/powertools-spa/en/USD/organization/units

問題是，這個 url ，對應 SAP Spartacus 里哪個 Angular Component 么？

我們可以通過查詢源代碼的方式自行找到答案。

和 B2B User tile 相關的配置，都維護在文件 user.config.ts 里, orgUser 的路徑為 organization/users:

這里就能找到 User tile 對應的 Angular Component了。

ManageUsersListComponent 對應 ListComponent：

對于 Org Unit 來說，路由配置的格式同 User 一樣：

這里同 User Mapping 實現有差異。在 User CMS mapping 里，ManageUsersListComponent 對應 ListComponent，而對于 Org Unit，Commerce 后臺 ManageUnitsListComponent，映射到 SAP Spartacus Component 是 UnitListComponent，而不是更通用的 ListComponent.

HTML JavaScript web前端

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

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