思路為如下示意圖：

新建一個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屬性，早已通過構造函數進行注入了：

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：

componentMapping, 現在已經知道要render MycomComponent了：

得到MycomComponent的factory：

調用MycomComponent構造函數，實例化：

渲染：

構造函數執行完畢并渲染完畢后，此時瀏覽器里已經能夠看到mycom works了，執行ngOnInit hook：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的使用ConfigModule.withConfig替换SAP Spartacus标准Component的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。