我們以前介紹過，經過 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)

SAP Spartacus PageLayoutComponent 如何知道自己應該顯示哪些具體內容

相關文章