SAP Spartacus-如何在Spartacus UI中显示自定义组件

时间:2020-10-05 17:36:40

标签: spartacus-storefront

我有一个自定义组件,可以在用户界面中将图像显示为图块。

对于后端创建的自定义组件,我得到的响应如下。

components:“ Test1Component Test2Component Test3Component Test4Component Test5Component Test6Component Test7Component Test8Component” 容器:“假” 修改时间:“ 2020-09-29T20:52:40.454 + 05:30” 名称:“标题组件” typeCode:“ TileCollectionComponent” uid:“ TilesCollectionComponent” uuid:“ eyJpdGVtSWQiOiJUaWxlc0NvbGxlY3Rpb25Db21wb25lbnQiLCJjYXRhbG9nSWQiOiJhbHNheWVyLXNwYUNvbnRlbnRDYXRbb9

如何检索数据并将其显示在用户界面中。

1 个答案:

答案 0 :(得分:0)

组件数据指示此组件是所谓的容器组件。容器组件仅响应组件UID。这有点不幸,因为您需要与Spartacus中的cms服务进行交互才能解析组件 types 。在开始渲染它们之前。

我们的代码库中确实有一个示例,您可以用来渲染这些嵌套的组件。您在https://github.com/SAP/spartacus/blob/532603fbcfcf7c21c3abbf4e342fcda03652b61e/projects/storefrontlib/src/cms-components/content/banner-carousel/banner-carousel.component.ts#L25中看到,我们已经获取了组件数据,并将其switchMap带到了CmsComponentData的数组中。 (使用cmsService.getComponentData)。 Spartacus会将循环中的不同并行请求自动合并到组件数据的单个后端。

您可以在ngFor循环中使用CmsComponentData数组,并利用cxComponentWrapper遍历所有CmsComponentData对象。 cxComponentWrapper将映射到正确的组件,并添加其他内容,例如smartedit集成。

<ng-container [cxComponentWrapper]="component"></ng-container>

尽管这一切都是可行的,但您的问题使我认为要构建一个更简单的解决方案来完成繁重的工作。