天天看點

使用ConfigModule.withConfig替換SAP Spartacus标準Component

思路為如下示意圖:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

建立一個Component,将自定義UI放在裡面:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

在app module裡,使用如下代碼,将CMS Component的SimpleResponsiveBannerComponent替換成我們自定義的MycomComponent:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

注意,第46行的SimpleResponsiveBannerComponent,是從Chrome開發者工具network标簽頁裡的Page請求response裡的Component typecode拷貝而來的:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

最後的運作時效果:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

運作時,Spartacus的入口,首先是Spartacus-storefront.js裡,執行ComponentWrapperDirective指令,來初始化CMS driven dynamic Component:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

ComponentWrapperDirective的private屬性,早已認證構造函數進行注入了:

使用ConfigModule.withConfig替換SAP Spartacus标準Component
使用ConfigModule.withConfig替換SAP Spartacus标準Component

determineMappings:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

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

使用ConfigModule.withConfig替換SAP Spartacus标準Component

得到MycomComponent的factory:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

調用MycomComponent構造函數,執行個體化:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

渲染:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

構造函數執行完畢并渲染完畢後,此時浏覽器裡已經能夠看到mycom works了,執行ngOnInit hook:

使用ConfigModule.withConfig替換SAP Spartacus标準Component

繼續閱讀