如何强制斯巴达克斯加载模板答案

【问题标题】：How can I force Spartacus to load a template如何强制斯巴达克斯加载模板
【发布时间】：2021-04-25 02:41:15
【问题描述】：

当主模块没有被引导（网络组件）时，如何让 Spartacus 从后端加载特定模板？

我的用例如下：

我有一个使用加速器构建的网站。我想逐步将它迁移到斯巴达克斯。首先是页眉，然后是页脚，然后是其余部分（仅从加速器移动到 SPA）。我的自定义页脚和页眉适用于 Spartacus SPA。为了将它们集成到加速器中，我使用 ngx-build-plus 为页眉和页脚构建 Web 组件。它们可以工作，但只渲染组件的静态部分，而不是 Spartacus 的插槽。我也没有看到对后端的请求。

应用模块：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    B2cStorefrontModule.withConfig({
      backend: {
        occ: {
          baseUrl: environment.occBaseUrl,
          prefix: environment.occPrefix,
        },
      },
      context: {
        baseSite: ['de'],
        language: ['en'],
        currency: ['EUR'],
        urlParameters: ['baseSite', 'language'],
      },
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en',
      },
      features: {
        level: '2.1',
      },
      breakpoints: {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1920,
      },
      layoutSlots: {
        WebxHomepageTemplate: {
          slots: [],
        },
      },
    }),
    BrowserTransferStateModule,
    UiHeaderModule,
  ],
  entryComponents: [AppComponent],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}
  ngDoBootstrap(): void {
    const elm = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('wc-header', elm);
  }
}

AppComponent 模板：

<cx-storefront>
  <ng-template cxOutletRef="header">
    <ui-header></ui-header>
  </ng-template>
</cx-storefront>

【问题讨论】：

标签： angular spartacus-storefront

【解决方案1】：

与布局加载相关的大部分逻辑都与路由相关，在 CmsPageGuard 内，在您的情况下，导航不会发生。

因此，您可以尝试伪造它（在组件中进行导航）或尝试手动执行所有步骤。我认为，需要的是设置正确的页面上下文（RoutingService.getPageContext()）并调用CmsService.getPage（或hasPage）来触发加载。不确定这是否全部，但我认为这是一个好的开始（您应该加载布局和插槽数据）。

【讨论】：

谢谢，我会试试的。
我将插槽配置为空，因为我只想拥有标题。当我引导主模块而不是使用 entryComponents 时，它按预期工作，唯一的问题是它改变了浏览器中的 URL，我不希望这样，因为后来我有两个 web-components 应该只显示页眉/页脚而不触及 URL（在初始加载时）。