思路为如下示意图:
![](https://img.haomeiwen.com/i2085791/b8b475436de0f142.png)
新建一个Component,将自定义UI放在里面:
![](https://img.haomeiwen.com/i2085791/3aa4f11fa5582f3f.png)
在app module里,使用如下代码,将CMS Component的SimpleResponsiveBannerComponent替换成我们自定义的MycomComponent:
![](https://img.haomeiwen.com/i2085791/49547130bedee4c9.png)
注意,第46行的SimpleResponsiveBannerComponent,是从Chrome开发者工具network标签页里的Page请求response里的Component typecode拷贝而来的:
![](https://img.haomeiwen.com/i2085791/654a37dd4fffcd59.png)
最后的运行时效果:
![](https://img.haomeiwen.com/i2085791/d4a9cd1c68a51f86.png)
运行时,Spartacus的入口,首先是Spartacus-storefront.js里,执行ComponentWrapperDirective指令,来初始化CMS driven dynamic Component:
![](https://img.haomeiwen.com/i2085791/c8a8257df1acf735.png)
ComponentWrapperDirective的private属性,早已通过构造函数进行注入了:
![](https://img.haomeiwen.com/i2085791/5d066a3395b00ba1.png)
let ComponentWrapperDirective = class ComponentWrapperDirective {
constructor(vcr, cmsComponentsService, injector, dynamicAttributeService, renderer, componentHandler, cmsInjector) {
this.vcr = vcr;
this.cmsComponentsService = cmsComponentsService;
this.injector = injector;
this.dynamicAttributeService = dynamicAttributeService;
this.renderer = renderer;
this.componentHandler = componentHandler;
this.cmsInjector = cmsInjector;
}
determineMappings:
![](https://img.haomeiwen.com/i2085791/402224d8aa457cc1.png)
componentMapping, 现在已经知道要render MycomComponent了:
![](https://img.haomeiwen.com/i2085791/39a4f869c067a46e.png)
得到MycomComponent的factory:
![](https://img.haomeiwen.com/i2085791/816f7fab606e0edd.png)
调用MycomComponent构造函数,实例化:
![](https://img.haomeiwen.com/i2085791/4aeea8c139792151.png)
渲染:
![](https://img.haomeiwen.com/i2085791/cac8e732d9bb4012.png)
构造函数执行完毕并渲染完毕后,此时浏览器里已经能够看到mycom works了,执行ngOnInit hook:
![](https://img.haomeiwen.com/i2085791/4c3d948ba546e44b.png)
网友评论