SAP Spartacus页面css类的赋值逻辑
2021-02-12 本文已影响0人
华山令狐冲
我们在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的原创文章,尽在:"汪子熙":
