我們在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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus页面css类的赋值逻辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。