Spartacus 4.0环境下如何将LoginComponent迁移至SiteLinks插槽

问题根因 #

Spartacus 4.x中LoginComponent的插槽绑定除了provideCmsStructure的静态CMS结构映射外，还在默认头部布局配置中硬绑定了Slot与组件的对应关系，仅修改CMS结构配置无法生效。

解决步骤 #

1. 无需删除默认的LoginComponent CMS映射provider，直接将你的自定义myCmsContentProviders放在根模块providers数组的末尾，保证优先级高于默认配置即可覆盖映射关系。
2. 新增自定义布局配置，调整SiteLinks插槽的组件列表，示例代码如下：

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

export const customHeaderLayoutConfig: LayoutConfig = {
  layoutSlots: {
    header: {
      slots: [
        'PreHeader',
        'SiteLinks',
        'SiteLogo',
        'SearchBox',
        'SiteLogin',
        'NavigationBar'
      ]
    },
    SiteLinks: {
      componentIds: [
        // 保留SiteLinks原有组件，追加LoginComponent
        'LanguageSelectorComponent',
        'CurrencySelectorComponent',
        'LoginComponent'
      ]
    }
  }
}

3. 在根模块的Spartacus配置中注入上述自定义布局配置：

@NgModule({
  imports: [
    B2cStorefrontModule.withConfig({
      // 原有其他Spartacus配置
      ...customHeaderLayoutConfig
    })
  ],
  providers: [
    // 原有其他provider
    ...myCmsContentProviders
  ]
})
export class AppModule {}

4. 如果调整后组件仍未显示，检查LoginComponent的默认样式是否被媒体查询隐藏，可追加自定义CSS强制显示：

cx-login {
  display: block !important;
}

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