思路為如下示意圖:
建立一個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: