SAP Spartacus 如何根据 page layout 获得对应支持的 slots
在 SAP Spartacus PageLayout Component 的实现里，每一个 layoutName 对应都有一个 cxOutlet 可供扩展：
第 13 行的 ngFor 指令，将该实现类的 slots$ 展开，为每一个 slot 放置对应的 CMS Component.
slots$ 是一个数组，通过 pageLayoutService.getSlots 方法获取。
本文介绍这个 getSlots 方法的执行明细。
switchMap 这个 rxjs 操作符，暗示了其传入的箭头函数，是一个 cancellable 的耗时操作。
在这个闭包内执行：
combineLatest：只要 this.page$ 和 this.breakpointService.breakpoint$ 有一个被订阅，就会触发 map 操作：
支持的所有 slots 和 slots 里面允许的 Components 列表：
breakpoint：xl
读取 slot 配置：
所有 template 配置都在 tis.config.layoutSlots 里了：
拿到了 header 的配置：
最终结果：
更多Jerry的原创文章，尽在：“汪子熙”:
SAP Spartacus 如何根据 page layout 获得对应支持的 slots相关推荐
- SAP Spartacus home页面的layout，template，section和slots
本地编辑这个文件: projects\storefrontlib\src\cms-structure\page\page-layout\page-layout.component.html 加上如下代 ...
- SAP Spartacus的home page navigation逻辑
我以开发模式启动SAP Spartacus,浏览器里输入url: localhost:4200, 会自动重定向到如下页面: http://localhost:4201/powertools-spa/e ...
- SAP Spartacus payment detail page的CMS模型
url: http://localhost:4200/electronics-spa/en/USD/my-account/payment-details 请求payment page的url: htt ...
- 如何找到 SAP Spartacus OCC cms page 发送请求时读取 API endpoint 的代码
CmsComponentAdapter: OccCmsComponentAdapter: 此处发起对 home page 的调用: 读取 CMS API 的 url: 这就是我在代码里配置的 endp ...
- SAP Spartacus B2B Unit page convertListItem方法的工作原理
点击expand all后,触发该方法: 输入参数unit,就是从后台OCC API返回的数据: 变量node绝大部分数据来自unit,使用-, 增添了一些额外属性: 递归调用: 递归函数处理之后的结 ...
- SAP Spartacus B2B Unit page Expand all按钮的工作原理
输入参数:node就是UnitTreeService.getTree返回的数据,key在这个例子为undefine: 因为activeUnitId为空,所以什么也没有执行: 最后的页面显示: Unit ...
- SAP Spartacus B2B Unit page OrgUnitService.getTree方法返回的结果
只有到loading为false,success为false,error为false时,才调用208行的this.loadTree加载数据: 发送一个OrgUnitActions.LoadTree的a ...
- SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较
You can only create new components in the WCMS Page View perspective. In the Live Edit perspective, ...
- 关于SAP Spartacus的Action - LoadCmsPageData
[Cms] Load Page Data page.action.ts里: export const LOAD_CMS_PAGE_DATA = '[Cms] Load Page Data'; 所有加载 ...
最新文章
- Redis NoSQL
- java操作excel文件之系列一：《读取excel文件的内容保存到数据库》
- web@css盒模型详解
- ODBC、OLE DB、 ADO的区别
- 人脸识别7-人脸图片相似度
- Android 启动性能、启动性能分析以及常见的启动性能问题分类
- excel poi 自动换行_Java利用POI生成Excel强制换行
- 读书到什么程度才能算融会贯通？
- 打造江西数智产业高地，百度飞桨人工智能产业赋能中心落户南昌青山湖
- AutoJs学习-实现自动刷快手极速版
- 合并多个文件的内容到一个文件
- OpenGL学习笔记(3)之渲染管线
- P5713_洛谷团队系统(深基3.例5)
- LeetCode/LintCode 题解丨一周爆刷字符串：简化路径
- 研究生英语期末复习(Unit1)
- 微信小程序源代码_模仿音乐播放器Apple Music
- DIAView高级视频教程
- AR、VR、云计算、大数据、区块链、AI编程技术选择和区分
- TASKBAR的奥秘
- vue2 支付宝 网页支付 返回form 表单的解决