使用ConfigModule.withConfig替换SAP Spartacus标准Component

简介: 使用ConfigModule.withConfig替换SAP Spartacus标准Component

思路为如下示意图:image.png新建一个Component,将自定义UI放在里面:image.png在app module里,使用如下代码,将CMS Component的SimpleResponsiveBannerComponent替换成我们自定义的MycomComponent:image.png注意,第46行的SimpleResponsiveBannerComponent,是从Chrome开发者工具network标签页里的Page请求response里的Component typecode拷贝而来的:image.png最后的运行时效果:image.png运行时,Spartacus的入口,首先是Spartacus-storefront.js里,执行ComponentWrapperDirective指令,来初始化CMS driven dynamic Component:image.pngComponentWrapperDirective的private属性,早已通过构造函数进行注入了:image.pngimage.pngdetermineMappings:image.pngcomponentMapping, 现在已经知道要render MycomComponent了:

image.png得到MycomComponent的factory:image.png调用MycomComponent构造函数,实例化:image.png渲染:image.png构造函数执行完毕并渲染完毕后,此时浏览器里已经能够看到mycom works了,执行ngOnInit hook:image.png

相关文章
|
6月前
|
JavaScript 前端开发
什么是 Spartacus 的 Video Component
什么是 Spartacus 的 Video Component
33 0
|
6月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
38 0
|
3月前
|
消息中间件 存储 监控
什么是 SAP CRM Middleware Component 里的 PRODUCT_R3_ADAPTER
什么是 SAP CRM Middleware Component 里的 PRODUCT_R3_ADAPTER
24 0
|
3月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
3月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
40 0
|
3月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
24 0
|
6月前
|
前端开发 UED Windows
关于 SAP_UI software component 的概要介绍
关于 SAP_UI software component 的概要介绍
47 0
|
6月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
46 0
|
6月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
41 2
|
6月前
|
JavaScript 前端开发 搜索推荐
SAP 电商云 footer 区域 Link Component HTML 源代码的详细讲解
SAP 电商云 footer 区域 Link Component HTML 源代码的详细讲解
69 0