在 SAP Spartacus PageLayout Component 的實作裡,每一個 layoutName 對應都有一個 cxOutlet 可供擴充:

第 13 行的 ngFor 指令,将該實作類的 slots$ 展開,為每一個 slot 放置對應的 CMS Component.
slots$ 是一個數組,通過 pageLayoutService.getSlots 方法擷取。
本文介紹這個 getSlots 方法的執行明細。
switchMap 這個 rxjs 操作符,暗示了其傳入的箭頭函數,是一個 cancellable 的耗時操作。
在這個閉包内執行:
combineLatest:隻要 this.page$ 和 this.breakpointService.breakpoint$ 有一個被訂閱,就會觸發 map 操作:
支援的所有 slots 和 slots 裡面允許的 Components 清單:
breakpoint:xl
讀取 slot 配置:
所有 template 配置都在 tis.config.layoutSlots 裡了:
拿到了 header 的配置:
最終結果: