如何定制化SAP Spartacus的页面布局

新建一个Layout Module，源代码如下：

import { NgModule } from '@angular/core';
import { ConfigModule } from '@spartacus/core';
import { LayoutConfig } from '@spartacus/storefront';



@NgModule({
  declarations: [],
  imports: [
    ConfigModule.withConfig({
      layoutSlots: {
        header: {
          lg: {
            slots: [
              'SiteContext',
              'SiteLogin',
              'MiniCart',
              'SiteLogo',
              'NavigationBar',
              'SearchBox',
            ],
          },
        }
      }
    } as LayoutConfig),
  ]
})
export class LayoutConfigurationModule { }

上述代码，给header区域定义的slots顺序如下：

然后在app module里启用该layout module即可：

最后运行时的效果：

更多Jerry的原创文章，尽在："汪子熙":