SAP Spartacus使用cxComponentWrapper测试MiniCart

该指令的作用是动态加载Component

如果将page-slot.component.html里的cxComponentWrapper指令注释掉:


SAP Spartacus使用cxComponentWrapper测试MiniCart


最后渲染的页面将会一片空白:

SAP Spartacus使用cxComponentWrapper测试MiniCart

SAP Spartacus使用cxComponentWrapper测试MiniCart




如果仅仅打印position的值:


SAP Spartacus使用cxComponentWrapper测试MiniCart


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


SAP Spartacus使用cxComponentWrapper测试MiniCart


如果将Component数据全部打印出来:

SAP Spartacus使用cxComponentWrapper测试MiniCart



效果如下:


SAP Spartacus使用cxComponentWrapper测试MiniCart


只渲染position为MiniCart的Component:


SAP Spartacus使用cxComponentWrapper测试MiniCart


最后效果如下:


SAP Spartacus使用cxComponentWrapper测试MiniCart


只有MiniCart被渲染了出来:


SAP Spartacus使用cxComponentWrapper测试MiniCart


完整代码:


SAP Spartacus使用cxComponentWrapper测试MiniCart

MiniCartComponent的Angular Component和CMS Component同名:

SAP Spartacus使用cxComponentWrapper测试MiniCart


从OCC API返回的MiniCartComponent数据:

SAP Spartacus使用cxComponentWrapper测试MiniCart


从上图能看出,Spartacus使用的CMS API,读取的page数据,类型字段名称为typeCode, 而Spartacus CMS mapping使用的字段为flexType, 因此需要Spartacus的convertor / normalizer,在字段typeCode和flexType之间做转换。

SAP Spartacus使用cxComponentWrapper测试MiniCart

上一篇:从P4到P9, 在马云家写代码到双11前端PM


下一篇:2684亿!阿里CTO张建锋:不是任何一朵云都撑得住双11