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 文件里，且只实现一次：
更多Jerry的原创文章，尽在：“汪子熙”:
SAP Spartacus B2B 列表页面的 (i) icon popover Component 的声明位置相关推荐
- SAP Spartacus B2B User 页面的数据读取逻辑设计
点击SAP Spartacus B2B的Users页面后: 触发selector: 看到user 列表: B2B user模块,从设计上说,位于Spartacus工程项目的feature-libs文件 ...
- SAP Spartacus b2b home页面的自动换行是怎么做到的
如下图所示: 6个banner的父节点,cx-page-slot, 是一个flex container: this element is causing an element to overflow. ...
- SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
- SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
- SAP Spartacus B2B OrgUnit 和 OrgUser 的路由映射差异比较
SAP Spartacus B2B 页面类似 SAP Fiori Launchpad,共有 6 个 tile(磁贴),点击某个磁贴,能跳转到对应的列表页面. 路由映射就是指点击某个 url 之后(例如 ...
- SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理
解析 SAP Spartacus B2B list 实现,即list.component.html时,因为在Component 模板里遇到了[cxPopover]指令,因此触发依赖注入: 首先创建di ...
- SAP Spartacus B2B ListComponent响应回车事件的实现
SAP Spartacus B2B的List页面: 和回车键事件相关的实现: <cx-table*ngIf="data.values?.length > 0; else empt ...
- SAP Spartacus B2B table的配置信息的merge原理
以SAP Spartacus b2b unit table的配置信息为例:位于文件units.config.ts里: 运行时,这些配置信息,被merge在table.service.ts的this.c ...
- SAP Spartacus shipping address页面请求2 - Put Address
注意,这是一个HTTP PUT请求: /occ/v2/electronics-spa/users/current/carts/00008679/addresses/delivery?addressId ...
最新文章
- 微博更经济的异地容灾方案是怎么搞的
- Android热修复原理，已整理成文档
- 小米手环4怎么使用_小米手环4/5 NFC添加加密门禁
- [USACO1.2]挤牛奶Milking Cows
- lua执行shell命令6_tolua_runtime 集成 lua-protobuf 第三方pb3解析库
- 计算机无法同步时间,为什么在Win7中无法同步计算机时间？
- 详细设计 存储分配_零基础学C语言（7）：存储类型
- linux命令逻辑运算：与、或、非、异或
- 我国自主开发的编程语言“木兰”是又一个披着“洋”皮的红芯浏览器吗？
- 十大笔记本电脑排行_2020双十一，十大高性价比游戏笔记本电脑值得买排行榜之搭载144Hz电竞屏机型（配置推荐）福利放送...
- cin.ignore()函数的用法
- 拓扑次序(Topological Order)
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_4.RabbitMQ研究-安装RabbitMQ...
- zotero 相关文章链接 （侵权请联系，立即删除）
- python第三方库官方文档汇总
- 树形结构的处理——组合模式（一）
- win10 6种截图方法 简介
- contiki学习笔记（八）rtimer stimer 计时器库
- pycharm-03-工程结构
- 说说JavaScript的原型链