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小时内删除侵权内容。