0

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

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 。

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

您能否解释一下 TabParagraphContainerComponent 和片段 ng-template (cxOutlet) 的工作原理？另外我认为这应该在 github 问题单（https://github.com/SAP/spartacus/issues/1484）中考虑，以便在 Spartacus（SmartEdit）中更好地支持 CMSTabParagraphContainer（AbstractCMSComponentContainer）。

谢谢你的帮助！

4

1 回答 1

0

最重要的部分是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>

您可能会面临的问题是type容器组件 cms 数据中缺少该组件。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。

于 2020-08-12T08:26:36.307 回答