SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件

简介: SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件

cxOutlet合集

SAP Spartacus自定义指令cxOutlet的工作原理


SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件


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


SAP Spartacus cxOutlet里的templatesRefs的填充逻辑


SAP Spartacus cxOutlet里的元数据存储,outlet名称和待渲染Component的映射关系


如下图所示:


image.png


传入cxOutlet这个自定义指令的值是:table.orgUnit.data.name:


image.png


cxOutlet自定义Directive的ngOnChanges方法里,进行Component的渲染,通过方法this.render实现:



image.png


image.png


image.png



vcr: View Container Reference

this.vcr.createEmbeddedView


image.png


每个outlet都有before, replace和after三个position:


image.png


传入cxOutlet自定义指令的SimpleChanges结构的值:


image.png


在cxOutlet的实现文件outlet.service.ts里,有一个叫做templatesRefs的存储结构,after,before,replace都指向一个map,key为outlet名称,可以理解成ABAP系统里的BAdI definition name,而value,指向一个数组,元素类型为ComponentFactory$1, 其中componentType指向ToggleLinkCellComponent,而selector即ToggleLinkCellComponent对应的selector.


image.png


cx-org-toggle-link-cell:

image.png

相关文章
|
6月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
|
6月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
|
调度 数据库
什么是 SAP Lock 机制中的 Lock Table
什么是 SAP Lock 机制中的 Lock Table
|
Web App开发 开发框架 前端开发
SAP Fiori Elements 应用中 table id 的生成逻辑
SAP Fiori Elements 应用中 table id 的生成逻辑
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
|
6月前
|
存储 缓存 前端开发
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
|
6月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
6月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
6月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用