SAP Spartacus 重用组件cx-table的设计原理

cx-table在SAP Spartacus尤其是B2B feature里有着广泛的用途：

它是一个shared Component，布局实现文件：table-component.html:

其中表格栏由td和cx-table-data-cell实现：

查看table.component.html里verticalLayout这个分支：

做个验证：

在渲染出来的页面里看到了ffffairy，说明这个分支我们找对了：

定义一个局部变量cell, 其值来自structure.cells,

再把cell的值赋给td的class属性。

最终渲染出的代码里，这个cx-table-data-cell是哪里来的？

这就得从我们自定义的OutletDirective指令说起。

我们需要计算一个string值赋给以cxOutlet为selector的指令。具体工作原理，参考Jerry后续的文章：SAP Spartacus自定义指令cxOutlet的工作原理。

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus 重用组件cx-table的设计原理相关推荐

SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...
SAP Spartacus Org Unit明细页面的设计原理
该页面分三部分组成. 其中蓝色和绿色两个区域的实现如下:两个section标签页: section是HTML标准的标签之一,每个标签通过h1到h6不等的heading标签标识. 运行时渲染的HTML原 ...
SAP Spartacus B2B List里的listData$设计原理
UI components do not store response data from observables locally, which means destroy logic can be ...
SAP Spartacus User Form里checkbox的设计原理
user form里每个区域总共由3个元素组成: 一个label,充当container作用一个span元素,维护textual label 一个实际的functional element labe ...
SAP Spartacus里的HTTPErrorInterceptor的单元测试设计原理
测试UnKnownErrorHandler是否能正确处理UnknownError这个状态: 这个handler是import进来的: 调用经过TestBed.inject注入后的http: 执行su ...
SAP CRM One Order函数CRM_Object_FILL_OW的设计原理
标题:SAP CRM One Order函数CRM_FILL_OW的设计原理 There are totally 60 function modules in One order with namin ...
SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
SAP Spartacus 中的 checkout(结帐) 设计
https://sap.github.io/spartacus-docs/extending-checkout The checkout feature in Spartacus is CMS-dri ...
SAP Spartacus 产品明细页面的 url 设计和数据源
明细页面 url: http://localhost:4200/electronics-spa/en/USD/OpenCatalogue/Cameras/Digital-Cameras/Digital ...

SAP Spartacus 重用组件cx-table的设计原理

SAP Spartacus 重用组件cx-table的设计原理相关推荐

最新文章

热门文章