SAP|SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容
我们以前介绍过，经过 SAP Spartacus 路由配置后的 routes 数组，其 route 数据结构的 Component 属性，清一色指向 generic 的 PageLayoutComponent，那么后者怎么知道自己应该加载哪些 Angular Component 的数据呢？
文章图片
【SAP|SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容】我们首先看看是哪些 template 调用了 PageLayoutComponent 的 selector：
文章图片
只有三处：
文章图片
运行时却有四处，这不奇怪，因为 product 明细页面是通过路由加载的，故出现在 router-outlet 下面。
文章图片
在其构造函数里加打印语句是无济于事的，因为这个 Component 的所有字段都是 Observable 类型，得 subscribe 了才能看到。
文章图片
所以我在其 @input 字段上设置了一个断点：
文章图片
文章图片
渲染触发点是第2行的 cxOutlet，触发第10行的 cx-page-layout Component 的创建：
文章图片
Component 实例(即 PageLayoutComponent)创建完毕后，给其 input 属性赋值：
文章图片
上图的赋值，会触发下图第14行代码执行。
文章图片
section$ 是一个 subject，其 next 逻辑是遍历其 listener，逐一通知：
文章图片
在模板文件 async pipe 执行时，触发 Observable 的执行：
文章图片
文章图片
根据 page, section 和 breakpoint，拿到该 section 里的 slots：
文章图片
layoutslot 的 key 是 page template：
文章图片
文章图片
这个 page template 里并没有一个 section 名叫 header：
文章图片
所以我们就 fallback 到全局配置里去取 header 的 slot 配置：
文章图片
getResponsiveSlotConfig：
文章图片
先看 layoutConfig 里有没有专门为 xl 而设置的配置，发现没有，只有 lg 的：
文章图片
就找和 xl 最接近的，答案是 lg：
文章图片
现在就知道了：LandingPage2Template 模板的 header 区域，应该显示下列这些 slots：
文章图片
更多Jerry的原创文章，尽在："汪子熙":
文章图片
推荐阅读
- csapp之lab（shell lab）
- csapp之第8章（异常控制流）
- 如何在浏览器里开发并运行|如何在浏览器里开发并运行 SAP UI5 应用
- SAP|SAP UI5 初学者教程之十七 - 聚合绑定在 UI5 复合控件中的使用试读版
- 什么是|什么是 SAP HANA XS JavaScript
- SAP|SAP UI5 初学者教程之十五 - 对话框和 Fragments 的使用方式
- SAP|SAP UI5 初学者教程之十四 - 嵌入视图的使用方式试读版
- OSA|OSA 安装
- 【合集】Jerry|【合集】Jerry Wang 2018～2021 四年期间的 SAP 技术文章合集
- SAP|SAP 电商云 Spartacus UI 的响应式 UI 实现细节