我們以前介紹過，經過 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。