时间戳

首页 > 解决方案 > SAP Spartacus - 如何在 Spartacus UI 中显示自定义组件

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

问题描述

我有一个自定义组件可以在我的 UI 中将图像显示为平铺。

对于从后端创建的自定义组件，我收到如下响应。

组件：“Test1Component Test2Component Test3Component Test4Component Test5Component Test6Component Test7Component Test8Component” 容器：“false” 修改时间：“2020-09-29T20:52:40.454+05:30” 名称：“Tiles Component” typeCode：“TileCollectionComponent” uid：“TilesCollectionComponent” uuid：“eyJpdGVtSWQiOiJUaWxlc0NvbGxlY3Rpb25Db21wb25lbnQiLCJjYXRhbG9nSWQiOiJhbHNheWVyLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJPbmxpbmUifQ=

如何检索数据并将其显示在 UI 中。

标签： spartacus-storefront

解决方案

组件数据表明该组件是所谓的容器组件。容器组件只响应组件 UID。这有点不幸，因为您需要与 Spartacus 中的 cms 服务进行交互以解析组件类型。在您开始渲染它们之前。

我们的代码库中确实有一个示例，您可以使用它来呈现这些嵌套组件。您在https://github.com/SAP/spartacus/blob/532603fbcfcf7c21c3abbf4e342fcda03652b61e/projects/storefrontlib/src/cms-components/content/banner-carousel/banner-carousel.component.ts#L25中看到我们被选中了组件数据和switchMapthis 到一个CmsComponentData. （使用cmsService.getComponentData）。Spartacus 将循环中的不同并行请求自动合并到组件数据的单个后端。

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

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

尽管这一切都可用，但您的问题让我想到构建一个更简单的解决方案来完成繁重的工作。

推荐阅读