SAP Spartacus页面css类的赋值逻辑

我们在SAP Spartacus渲染出的页面HTML原生代码里，能观察到DOM节点的class值，比如header：

navigation：

footer：

LandingPage2Template：

这些css style的赋值所在：

<ng-template
  [cxPageTemplateStyle]="layoutName$ | async"
  [cxOutlet]="layoutName$ | async"
  [cxOutletContext]="{
    templateName$: templateName$,
    slots$: slots$,
    section$: section$
  }"
>
  <ng-content></ng-content>

  <cx-page-slot
    *ngFor="let slot of slots$ | async"
    [position]="slot"
    [isPageFold]="slot === (pageFoldSlot$ | async)"
  ></cx-page-slot>
</ng-template>

具体设置css style的代码位置：

/**
   * Adds the page template as a style class to the given element. If any
   * page template was added before, we clean it up.
   *
   * We'll not use hostBinding for the style class, as it will potential drop
   * an existing class name on the host. This is why we need to work with
   * the lower level change detection api.
   */
  protected addStyleClass(template: string, el?: HTMLElement): void {
    this.clear(el);
    if (template) {

      console.log('1108 add style from template: ' + template + ' into element: ' + el + ' host: ' + this.host);
      this.currentTemplate = template;
      (el ?? this.host).classList.add(this.currentTemplate);
      this.cd.markForCheck();
    }
  }

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