我们以前介绍过，经过 SAP Spartacus 路由配置后的 routes 数组，其 route 数据结构的 Component 属性，清一色指向 generic 的 PageLayoutComponent，那么后者怎么知道自己应该加载哪些 Angular Component 的数据呢？

![](https://img-blog.csdnimg.cn/img_convert/596a90e14ea46a5668cffca12cdf2ffe.png)

我们首先看看是哪些 template 调用了 PageLayoutComponent 的 selector：
![](https://img-blog.csdnimg.cn/img_convert/e2543fcf4229cfe4587dac017a94a941.png)

只有三处：
![](https://img-blog.csdnimg.cn/img_convert/734e262c163139967780cd2cac34392e.png)

运行时却有四处，这不奇怪，因为 product 明细页面是通过路由加载的，故出现在 router-outlet 下面。

![](https://img-blog.csdnimg.cn/img_convert/ff83867b6132d187d41ac1e556c311fd.png)

在其构造函数里加打印语句是无济于事的，因为这个 Component 的所有字段都是 Observable 类型，得 subscribe 了才能看到。

![](https://img-blog.csdnimg.cn/img_convert/f07809b7b3800a2bc44173874708084a.png)

所以我在其 @input 字段上设置了一个断点：

![](https://img-blog.csdnimg.cn/img_convert/d55637d2c9adcad4b653ae1f22d7c37b.png)

![](https://img-blog.csdnimg.cn/img_convert/6bae2f25395c52ddc6298bf9ece47ca2.png)

渲染触发点是第2行的 cxOutlet，触发第10行的 cx-page-layout Component 的创建：

![](https://img-blog.csdnimg.cn/img_convert/bad7a1da5e271fd715b4919d315cc815.png)

Component 实例(即 PageLayoutComponent)创建完毕后，给其 input 属性赋值：
![](https://img-blog.csdnimg.cn/img_convert/d7b0bacd74a95a8ca1130340fbf2ea0f.png)

上图的赋值，会触发下图第14行代码执行。

![](https://img-blog.csdnimg.cn/img_convert/f268a6b8c536058f97949c673d7b6cbc.png)

section$ 是一个 subject，其 next 逻辑是遍历其 listener，逐一通知：
![](https://img-blog.csdnimg.cn/img_convert/3171e2e5506042a62ce8c52c98d89a29.png)

在模板文件 async pipe 执行时，触发 Observable 的执行：
![](https://img-blog.csdnimg.cn/img_convert/34c598f66d9accfed76ccf26b610a2e3.png)

![](https://img-blog.csdnimg.cn/img_convert/2e268e7483f3c27ddccffc81b213bb67.png)

根据 page, section 和 breakpoint，拿到该 section 里的 slots：
![](https://img-blog.csdnimg.cn/img_convert/bd9046fc58f7d29fdc8077d69a4084f8.png)

layoutslot 的 key 是 page template：
![](https://img-blog.csdnimg.cn/img_convert/012b4484fa8448a50a333125f74b0e80.png)

![](https://img-blog.csdnimg.cn/img_convert/62df95224d9bbbb8cc29b91e99405a33.png)

这个 page template 里并没有一个 section 名叫 header：
![](https://img-blog.csdnimg.cn/img_convert/0cb85005de2546d05dda12ef8cac1314.png)

所以我们就 fallback 到全局配置里去取 header 的 slot 配置：
![](https://img-blog.csdnimg.cn/img_convert/70555747db8fcf2469e50192826e0be1.png)

getResponsiveSlotConfig：
![](https://img-blog.csdnimg.cn/img_convert/b75a2c08f64456a30dedb84bd14fd604.png)

先看 layoutConfig 里有没有专门为 xl 而设置的配置，发现没有，只有 lg 的：
![](https://img-blog.csdnimg.cn/img_convert/c38a91274f0f0c7f0201557a699aa858.png)

就找和 xl 最接近的，答案是 lg：
![](https://img-blog.csdnimg.cn/img_convert/7fc4d5bfccba6e02bbc582ee8ba25112.png)

现在就知道了：LandingPage2Template 模板的 header 区域，应该显示下列这些 slots：

![](https://img-blog.csdnimg.cn/img_convert/1d121ebd263a8bddfaded1d929662134.png)

ITPub博客

SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容