SAP Spartacus 如何根据 page layout 获得对应支持的 slots

在 SAP Spartacus PageLayout Component 的实现里,每一个 layoutName 对应都有一个 cxOutlet 可供扩展:

SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第1张图片

第 13 行的 ngFor 指令,将该实现类的 slots$ 展开,为每一个 slot 放置对应的 CMS Component.

slots$ 是一个数组,通过 pageLayoutService.getSlots 方法获取。

SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第2张图片

本文介绍这个 getSlots 方法的执行明细。

switchMap 这个 rxjs 操作符,暗示了其传入的箭头函数,是一个 cancellable 的耗时操作。

在这个闭包内执行:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第3张图片

combineLatest:只要 this.page$ 和 this.breakpointService.breakpoint$ 有一个被订阅,就会触发 map 操作:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第4张图片

支持的所有 slots 和 slots 里面允许的 Components 列表:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第5张图片

breakpoint:xl

SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第6张图片

读取 slot 配置:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第7张图片

所有 template 配置都在 tis.config.layoutSlots 里了:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第8张图片

SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第9张图片

拿到了 header 的配置:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第10张图片

最终结果:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots_第11张图片

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

你可能感兴趣的:(SAP Spartacus 如何根据 page layout 获得对应支持的 slots)