SAP Spartacus 如何根据 page layout 获得对应支持的 slots-阿里云开发者社区

开发者社区> jerrywangsap> 正文

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

简介: SAP Spartacus 如何根据 page layout 获得对应支持的 slots
+关注继续查看

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


image.png


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


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


image.png


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


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


在这个闭包内执行:


image.png

combineLatest:只要 this.page$ 和 this.breakpointService.breakpoint$ 有一个被订阅,就会触发 map 操作:


image.png

支持的所有 slots 和 slots 里面允许的 Components 列表:

image.png


breakpoint:xl


image.png


读取 slot 配置:


image.png

所有 template 配置都在 tis.config.layoutSlots 里了:


image.png



拿到了 header 的配置:


image.png

最终结果:


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载