SAP - 在 Spartacus 中显示组件内容时出现问题

Question

我正在尝试通过我的 SAP CC 项目实施 Spartacus。我加载了 electronics-spa 默认页面，并在其中从头开始创建一个新页面（“testPage1”有一个 ParagraphComponent，其中在主 SAP 项目的 impex 中包含文本“contenido del parrafo”，以及默认标题和页脚。

但是，在加载页面时，该组件无法正确加载：

SAP 进出口

$contentCatalog=electronicsContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])[default=$contentCatalog:Online]
$siteResource=jar:de.hybris.platform.spartacussampledata.constants.SpartacussampledataConstants&/spartacussampledata/import/contentCatalogs/electronicsContentCatalog

INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
;;TestTemplate;Test Template;testPage;ContentPage

INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='TestTemplate'];validComponentTypes(code);compTypeGroup(code)
;TopHeaderSlot;;;wide
;SiteLogo;;;logo
;HeaderLinks;;;headerlinks
;SearchBox;;;searchbox
;MiniCart;;;minicart
;NavigationBar;;;navigation
;Footer;;;footer
;TextfieldConfigContent;;CMSFlexComponent;narrow
;Space1;;CMSParagraphComponent;wide

INSERT_UPDATE ContentSlotForTemplate;$contentCV;uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='TestTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;TopHeaderSlot-TextfieldConfigPage;TopHeaderSlot;;TopHeaderSlot;true
;;SiteLogo-TextfieldConfigPage;SiteLogo;;SiteLogoSlot;true
;;HeaderLinks-TextfieldConfigPage;HeaderLinks;;HeaderLinksSlot;true
;;SearchBox-TextfieldConfigPage;SearchBox;;SearchBoxSlot;true
;;MiniCart-TextfieldConfigPage;MiniCart;;MiniCartSlot;true
;;NavigationBar-TextfieldConfigPage;NavigationBar;;NavigationBarSlot;true
;;Footer-TextfieldConfigPage;Footer;;FooterSlot;true

INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;testPage1;first test page;TestTemplate;/testPage1;;;

INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;content[lang='en']
;;paragraphTest;paragraph test;"contenido del parrafo"

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;contentSlotTest;content slot test;true;paragraphTest

INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;connetSlotForPageTest;Space1;testPage1;contentSlotTest

app.component-html

<cx-storefront></cx-storefront>

<ng-template cxOutletRef="SearchBoxComponent" style="color: aquamarine;">
</ng-template>

<ng-template cxOutletRef="ParagraphComponent" style="color: red;">
</ng-template>d

<ng-template cxOutletRef="HeaderLinks" style="background-color:red;">
</ng-template>

<ng-template cxOutletRef="Space1" let-model>
    "Space1" position
</ng-template>

<li><a href="">Space1</a></li> 

自定义布局-config.ts

import { LayoutConfig } from '@spartacus/storefront';

    export const testPage: LayoutConfig = {
      layoutSlots: {
        header: {
          lg: {
            slots: [
                'TopHeaderSlot',
                'SiteLogo',
                'HeaderLinks',
                'SearchBox',
                'MiniCart',
                'NavigationBar',
                
            ],
          },
          slots: ['TopHeaderSlot',
          'SiteLogo',
          'HeaderLinks',
          'SearchBox',
          'MiniCart',
          'NavigationBar'],
        },
        navigation: {
          lg: { slots: [] },
          slots: ['TextfieldConfigContent']
        },
        footer: {
          slots: ['Footer'],
        },
        TestTemplate: {
          pageFold: 'Space1',
          slots: ['Space1'],
        }
    }};

到目前为止，我遇到的每个教程都没有帮助，任何帮助将不胜感激。 PS：我使用的是斯巴达克斯版本'4.3.8'

Answer 1

您将用

cxOutletRef

替换插槽“Space1”的 CMS 驱动内容。当不使用

cxOutletRef

时，

cxOutletPos

会完全取代插座。这就是为什么您看到

"Space1" position

而不是

contenido del parrafo

。

尝试删除此代码：

<ng-template cxOutletRef="Space1" let-model>
    "Space1" position
</ng-template>

以下是供参考的文档：https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/eaef8c61b6d9477daf75bff9ac1b7eb4/b98af37456b2493e8fd5e733931c5cb4.html?locale=en-US&q=outlets#template-driven-outlets