我們以前介紹過，經過 SAP Spartacus 路由配置後的 routes 陣列，其 route 資料結構的 Component 屬性，清一色指向 generic 的 PageLayoutComponent，那麼後者怎麼知道自己應該載入哪些 Angular Component 的資料呢？

我們首先看看是哪些 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的原創文章，盡在："汪子熙":