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。

出于测试目的，我添加了“普通” CMSTabParagraphContainer CMSParagraphComponent到后台的我的内容位置。我可以编辑 SmartEdit中显示的第一个CMSParagraphComponent。不幸的是，我无法将新段落添加到CMSTabParagraphContainer。所以我想 ng-template（cxOutlet）解决方案是比我更好的解决方案。

能否请您说明TabParagraphContainerComponent和代码段的方式 ng-template（cxOutlet）有效吗？我也认为这应该在 github发行票据（https://github.com/SAP/spartacus/issues/1484），以便更好地支持CMSTabParagraphContainer（AbstractCMSComponentContainer）在Spartacus（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？

1 个答案: