如何在Header布局中新增DIV元素且无需覆写storefront核心组件

以下三种方案都可以实现你的需求：

• 方案1：使用Spartacus原生Outlet插槽注入内容 #

这是最推荐的轻量实现方式，Spartacus为所有核心页面组件预置了插槽点位，你可以直接在自定义组件中注入内容，完全不需要修改核心组件源码。
示例代码：

<!-- 在自定义模块对应的组件模板中添加即可 -->
<ng-template cxOutlet="header" cxOutletPos="before">
  <!-- 此处放置自定义元素内容，会自动插入到header的对应位置 -->
  <div class="custom-nav-element">你需要添加的内容</div>
</ng-template>

你可以根据实际需求调整cxOutlet的点位（支持匹配cx-pagelayout、navigation-bar等所有核心组件的预置点位），cxOutletPos支持before（之前插入）、after（之后插入）、replace（替换原内容）三种位置模式。你可以在浏览器开发者工具中查看核心Header组件上的data-cx-outlet属性，获取对应的插槽点位名称。

• 方案2：通过CMS配置新增Page Slot #

Spartacus的页面结构完全由CMS驱动，你只需要在CMS后台给Header对应的页面模板新增需要的Page Slot，或者给现有Slot添加自定义CMS组件，前端会自动渲染出你需要的<cx-pageslot>结构，不需要修改任何前端核心代码。
本地开发调试时可以直接通过Spartacus的CMS配置覆盖实现，示例配置：

// 在app.module.ts的providers数组中添加如下配置
provideConfig(<CmsConfig>{
  cmsComponents: {
    CustomNavComponent: {
      component: YourCustomAngularComponent,
    },
  },
  slots: {
    HeaderCustomSlot: {
      componentIds: ['CustomNavComponent'],
    },
  },
})

• 方案3：纯样式场景使用CSS伪元素实现 #

如果你添加元素仅为满足样式需求、不需要绑定交互逻辑，可以直接用CSS伪元素实现，不需要修改DOM结构：

header cx-pagelayout::before {
  content: '';
  /* 此处添加需要的样式属性即可 */
  display: block;
  width: 120px;
  height: 24px;
  background: #2563eb;
}

你期望实现的DOM结构：

<header>
    <cx-pagelayout>
        <div>
            <cx-pageslot>

通过前两种方案都可以原生实现，完全不需要修改核心storefront组件的源码。

内容的提问来源于stack exchange，提问作者pemko