Spartacus (SmartEdit) 是否支持自定义 AbstractCMSComponentContainer？

Question

我在后端有以下数据模型：

AccordionComponentContainer extends CMSTabParagraphContainer
AccordionItemComponent extends SimpleCMSComponent

扩展 CMSTabParagraphContainer 的容器，因为扩展了 AbstractCMSComponentContainer 很麻烦（生成的 jalo 类有进行调整，但这对这种情况并不重要，仅适用于理解。

现在我在 Spartacus CmsAccordionComponent 中有了一个组件。我介绍了一个组件映射：

AccordionComponentContainer: { 
  component: CmsAccordionComponent, 
},

在我的组件 html 文件中，我有这样的内容：

<h2>{{headline$ | async}}</h2> 
<ul> 
  <ng-container *ngFor="let component of components$ | async; let i = index"> 
    <li>{{component.content}}</li>
  </ng-container> 
</ul>

我使用了文件 projects/storefrontlib/src/cms-components/content/tab-paragraph-container 作为我的实现参考（例如组件实现）。期待 ng-template (cxOutlet):

<ng-template [cxOutlet]="component.flexType" [cxOutletContext]="{}">
  <ng-container [cxComponentWrapper]="component"></ng-container> 
</ng-template>

之前，我尝试过与CMSTabParagraphContainer相同的解决方案。由于某种原因，这在我的项目中不起作用。我为子项 (AccordionItemComponent) 引入了一个自己的组件和一个映射，但它没有用。未显示子组件。

所以我使用了上面描述的解决方案。在我的解决方案中，显示了组件（还有子组件），但我无法在 SmartEdit 中编辑它们。可能与这个问题有关：https://github.com/SAP/spartacus/issues/1484.

出于测试目的，我添加了 'normal' CMSTabParagraphContainer CMSParagraphComponent 到我在后台的内容插槽。我可以编辑 SmartEdit 中显示的第一个 CMSParagraphComponent。不幸的是，我无法将新段落添加到 CMSTabParagraphContainer。因此我认为 ng-template (cxOutlet) 解决方案是我的更好的解决方案。

能否解释一下 TabParagraphContainerComponent 和代码片段 ng 模板（cxOutlet）有效吗？我也认为这应该在 github 开票 (https://github.com/SAP/spartacus/issues/1484) 以便更好地支持 CMSTabParagraphContainer (AbstractCMSComponentContainer) 在斯巴达克斯 (SmartEdit) 中。

感谢您的帮助！

Answer 1

最重要的部分是cxComponentWrapper。该指令获取组件插槽数据并在其中呈现组件。

cxComponentWrapper 需要每个组件的以下数据集：

{
  flexType: item.typeCode,
  typeCode: item.typeCode,
  uid: item?.uid
}

典型的容器组件模板实现会迭代各种组件并应用指令：

<ng-container *ngFor="let item of items$ | async">
  <ng-container
    [cxComponentWrapper]="{
      flexType: item.typeCode,
      typeCode: item.typeCode,
      uid: item?.uid
    }"
  >
  </ng-container>
</ng-container>

您可能会遇到的问题是容器组件 cms 数据中缺少组件 type。 cms api 只会公开各种嵌套组件的组件 UID。您需要使用 CmsService.getComponentData 从后端获取组件类型。您需要为每个组件 uid 执行此操作。如果您在循环中执行此操作，Spartacus 实际上会合并对 CmsService.getComponentData 的各种调用，并对后端执行单个调用。

可以在 https://github.com/SAP/spartacus/blob/746a15c1b63998065b0ceea96f4da052829533fb/projects/storefrontlib/src/cms-components/content/banner-carousel/banner-carousel.component.ts#L25.

中找到此类实现的示例

Spartacus (SmartEdit) 是否支持自定义 AbstractCMSComponentContainer？

Is there any support of custom AbstractCMSComponentContainer in Spartacus (SmartEdit)?

spartacus-storefront

smartedit