思路为如下示意图:新建一个Component,将自定义UI放在里面:在app module里,使用如下代码,将CMS Component的SimpleResponsiveBannerComponent替换成我们自定义的MycomComponent:注意,第46行的SimpleResponsiveBannerComponent,是从Chrome开发者工具network标签页里的Page请求response里的Component typecode拷贝而来的:最后的运行时效果:运行时,Spartacus的入口,首先是Spartacus-storefront.js里,执行ComponentWrapperDirective指令,来初始化CMS driven dynamic Component:ComponentWrapperDirective的private属性,早已通过构造函数进行注入了:determineMappings:componentMapping, 现在已经知道要render MycomComponent了:
得到MycomComponent的factory:调用MycomComponent构造函数,实例化:渲染:构造函数执行完毕并渲染完毕后,此时浏览器里已经能够看到mycom works了,执行ngOnInit hook: