spartacus-storefront - 扩展 StoreFrontComponent (cx-storefront)

Question

要自定义我的页面布局，我想从 app.component.ts 扩展根组件以及此 repo 的示例：h ttps://github.com/DivanteLtd/spartacus-capybara。

但是在最近的 Spartacus 版本中，父构造函数提供了四个输入参数，而不是示例中的两个。这四个参数是该类型的实例：HamburgerMenuService、RoutingServiceElementRef <HTMLElement>和 KeyboardFocusService（见附图）。

我的问题是我不知道将什么作为第三个参数（ElementRef）传递给相对构造函数。我知道它是对模板中 HTML 元素的引用，但是哪个？如果在调用父构造函数（super）时不能使用'this'关键字，我该如何引用它？有没有人有这方面的经验？在此先感谢您的帮助。

app.compoment 模板看起来像这样：

<ng-template cxOutlet="cx-storefront">
  <cx-page-layout section="topBanner">
    <cx-page-slot position="SiteContext"></cx-page-slot>
  </cx-page-layout>
  <ng-template cxOutlet="cx-header">
    <header
      (click)="collapseMenuIfClickOutside($event)"
      (keydown.escape)="collapseMenu()"
      [class.is-expanded]="isExpanded$ | async">
      <cx-page-layout section="header"></cx-page-layout>
      <cx-page-layout section="navigation"></cx-page-layout>
    </header>
    <cx-page-slot position="BottomHeaderSlot"></cx-page-slot>
  </ng-template>
  <router-outlet></router-outlet>
  <ng-template cxOutlet="cx-footer">
    <footer>
      <ng-container [cxComponentWrapper]="footerComponent"></ng-container>
    </footer>
  </ng-template>
</ng-template>

标签： spartacus-storefront