SAP Spartacus Org Unit User List页面的设计原理
从cx-org-unit-user-list selector出发：
Component为UnitUserListComponent：
打开其html实现，里面又消费了cx-org-sub-list这个selector，同时a标签指定了actions属性：
cx-org-sub-list下面的这个a标签，渲染时不会直接出现在cx-org-sub-list下面，而是出现在cx-org-sub-list内部出现了ng-content select=actions的地方：
所以进入selector cx-org-sub-list的实现：sub-list.component.html, 这是一个shared Component：
打开sub-list.component.html，里面使用ng-content select=actions, 定义了可以动态注入UI的注入点：
上图能看到，cx-org-sub-list里的a actions会出现在selector cx-org-card的正下方。
再看cx-org-card的实现card.component.html：
看来所有的真实UI都位于
card.component.html定义的cx-view里：
上图actions class div内的a，实际是通过下面这个ng-content动态注入的：
为了验证这一点，我们可以做个实验：
运行时，果然发现create a标签页出现在拥有fairy class的div下面：
因此，最后处理issue，精力应集中在sub-list.component.html中的cx-table:
更多Jerry的原创文章，尽在：“汪子熙”:
SAP Spartacus Org Unit User List页面的设计原理相关推荐
- SAP Spartacus B2B Unit page convertListItem方法的工作原理
点击expand all后,触发该方法: 输入参数unit,就是从后台OCC API返回的数据: 变量node绝大部分数据来自unit,使用-, 增添了一些额外属性: 递归调用: 递归函数处理之后的结 ...
- SAP Spartacus Org Unit List响应回车案件的实现原理
我在SAP Spartacus Org Unit List里,用tab键选中某个行项目后,敲回车键: 首先会在屏幕右半部份显示一个只包含布局不包含数据的页面: 待数据加载完成之后,右边也能显示完整的页 ...
- SAP Spartacus B2B table的配置信息的merge原理
以SAP Spartacus b2b unit table的配置信息为例:位于文件units.config.ts里: 运行时,这些配置信息,被merge在table.service.ts的this.c ...
- SAP Spartacus org unit页面的三种focus border及细节讨论
最外面的矩形框,是table row里任意一个元素被focus之后,触发整个cx-table :focus-within的选择器后生成的效果: 中间的一条竖线,是a标签 focus后的效果: butt ...
- SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...
- 如何给 SAP Spartacus Storefront 创建新的页面
page template 不包含 layout 或者 design information. content slot 在页面上的具体位置,以及 layout 和 design 的选择,必须在前端指 ...
- SAP Spartacus organization unit list的实现Component
SAP Spartacus B2B My Company功能里的org unit list实现: http://localhost:4200/powertools-spa/en/USD/organiz ...
- SAP Spartacus 的基于outlet 的页面扩展
outlet 是 SAP Spartacus 提供 partners 一种将 custom UI 插入 Spartacus 标准 DOM 的一种手段. outlets get added for ea ...
- SAP Spartacus User form通过label标签的实现原理
第一次见到这个有点诧异,居然是通过label实现的: 上述页面可以从SAP Spartacus User list,点击某个user进入明细页面开始编辑: 看到这个ng-reflect-name=ro ...
最新文章
- 题目1444：More is better
- Cloud for Customer的设置加载机制
- 地球化学图解系统GCDPlot 0.33
- apk 泊车摄像头_【实测】 有了这款360全景泊车神器 新司机秒变老司机
- 为Editplus安装smali代码语法高亮插件
- html5 canvas 画直线
- 三极晶体管放大电路实验
- Centos Ubuntu防爆破ssh脚本
- linux 检验md5命令,linux命令行校验工具md5sum
- 关于echarts3总chinamap的配置问题
- 制造业ERP系统具体操作流程是什么？
- 华为交换机修改BootROM密码
- 计算机技术在生物学中的应用题库,2018年第二军医大学基础医学部816计算机在生物医学中的应用之生物化学考研基础五套测试题...
- 第一章、Zigbee模块的简介及特点
- 打通法律服务群众“最后一公里”，方正璞华劳动人事法律自助咨询服务平台频获“点赞”
- 【Android系统】虚拟按键 平板设备中重叠的问题
- 微商怎么引流？不懂这些就引不来流量！
- Bentley 软件公司将以约 10.5 亿美元的价格收购全球领先的地球科学三维建模软件提供商 Seequent
- 计算机不能启动任务管理器,win10系统无法打开任务管理器怎么办
- docker-anpine镜像介绍