天天看點

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

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

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

第 13 行的 ngFor 指令,将該實作類的 slots$ 展開,為每一個 slot 放置對應的 CMS Component.

slots$ 是一個數組,通過 pageLayoutService.getSlots 方法擷取。

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

本文介紹這個 getSlots 方法的執行明細。

switchMap 這個 rxjs 操作符,暗示了其傳入的箭頭函數,是一個 cancellable 的耗時操作。

在這個閉包内執行:

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

combineLatest:隻要 this.page$ 和 this.breakpointService.breakpoint$ 有一個被訂閱,就會觸發 map 操作:

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

支援的所有 slots 和 slots 裡面允許的 Components 清單:

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

breakpoint:xl

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

讀取 slot 配置:

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

所有 template 配置都在 tis.config.layoutSlots 裡了:

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

拿到了 header 的配置:

SAP Spartacus 如何根據 page layout 獲得對應支援的 slots

最終結果:

繼續閱讀