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

举报
汪子熙 发表于 2022/05/20 23:31:26 2022/05/20
【摘要】 SAP Spartacus B2B 页面的列表页面,一共有 6 个类似 SAP Fiori Language 里的 tile(磁贴):点击去之后,能看到列表页面有一个绿色 icon 图标,点击之后,弹出一个 Popover Component:第一个疑问就是:我们需要在 6 个 不同的 tile 对应的列表页面里,重复定义 6 次 这个 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.

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。