該指令的作用是動態(tài)加載Component

如果將page-slot.component.html里的cxComponentWrapper指令注釋掉：

最后渲染的頁面將會一片空白：

如果僅僅打印position的值：

能看到SAP Spartacus所有可用的position：

如果將Component數(shù)據(jù)全部打印出來：

效果如下：

只渲染position為MiniCart的Component：

最后效果如下：

只有MiniCart被渲染了出來：

完整代碼：

<ng-template[cxOutlet]="position"[cxOutletContext]="{ components$: components$ }" ><ng-template*ngFor="let component of components"[cxOutlet]="component.flexType"[cxOutletContext]="{ component: component }"[cxOutletDefer]="getComponentDeferOptions(component.flexType)"(loaded)="isLoaded($event)"><div>position: {{ position }}</div><ng-container *ngIf="position === 'MiniCart'" [cxComponentWrapper]="component"></ng-container></ng-template> </ng-template>

MiniCartComponent的Angular Component和CMS Component同名：

從OCC API返回的MiniCartComponent數(shù)據(jù)：

從上圖能看出，Spartacus使用的CMS API，讀取的page數(shù)據(jù)，類型字段名稱為typeCode, 而Spartacus CMS mapping使用的字段為flexType, 因此需要Spartacus的convertor / normalizer，在字段typeCode和flexType之間做轉(zhuǎn)換。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus使用cxComponentWrapper测试MiniCart的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。