Chrome開發(fā)者工具里展開Observable對象，從其operator能觀察到施加在該Observable對象上的操作：

Map操作：(event) => this.getBreakpoint(event.target.innerWidth)

source.operator: DistinctUntilChangedOperator

這個this.breakpointService.breakpoint$的賦值位置：果然有map和distinctUntilChanged，通過pipe鏈接：

link：https://sap.github.io/spartacus-docs/above-the-fold/#page-fold-configuration

The page fold is configurable for each page template and breakpoint.

page fold針對每個page template和breakpoint進(jìn)行配置。

The page fold configuration is only an indication to speed up the initial creation of page slots that are above the fold.

You designate the page fold by assigning a page slot to the pageFold parameter.

將pageSlot賦值給pageFold.

This page slot, and all previous, sibling page slots, are “above the fold”.

位于pageFold屬性指定的slot以及其之前的兄弟page slot，稱之為above the fold.

These page slots are prioritized ahead of page slots that are “below the fold”.

All page slots are eventually rendered if they happen to be above the fold.

The page fold indicates the last page slot that should be rendered above the fold.

Page fold代表應(yīng)該以above the fold方式渲染的page slots中的最后一個。

If you need a configuration for specific breakpoints, you can configure the page fold for every breakpoint, as shown in the following example:

The page slots adjust their height automatically when components are loaded.

Page slot的高度是自適應(yīng)的。

Given that content can be added at runtime, it is not possible to implement a (hard-coded) minimum height for page slots or components – it all depends on what the business will add at runtime.

不可能為page slot或者Component設(shè)置一個默認(rèn)的最小高度。

To make it possible to defer the loading of below-the-fold content, Spartacus marks page slots that are below the page fold while page slots above the fold are being loaded. All page slots are marked with an is-pending class as long as all the inner components are not loaded.

當(dāng)above the fold的page slot被加載時，below the fold中的slots被打上標(biāo)記：如果其inner Components尚未被加載，則使用is-pending class來標(biāo)注。

Additionally, the page fold slot has a page-fold class. With these two classes, Spartacus can apply various CSS rules to control deferred loading of below-the-fold content.

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus pagefold学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。