斯巴达克斯是否支持自定义AbstractCMSComponentContainer (SmartEdit)？

Question

后端有以下数据模型：

AccordionComponentContainer extends CMSTabParagraphContainer
AccordionItemComponent extends SimpleCMSComponent

扩展CMSTabParagraphContainer的容器是痛苦的，因为扩展AbstractCMSComponentContainer是痛苦的(生成的jalo类必须进行调整，但这对于本例来说并不重要，只是为了理解。

现在，我在斯巴达克斯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-模板(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。

为了测试目的，我在后台的内容插槽中添加了CMSParagraphComponent的“正常”CMSTabParagraphContainer。我可以编辑第一个CMSParagraphComponent，在SmartEdit中显示。不幸的是，我不能在CMSTabParagraphContainer中添加新的段落。因此，我认为ng模板(cxOutlet)解决方案比我的更好.

，您能解释一下TabParagraphContainerComponent和代码片段ng模板(cxOutlet)是如何工作的吗？此外，我认为在github发行票证()中应该考虑到这一点，以便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上可以找到这样一个实现的例子。