Customizing CMS Components

Spartacus 店面是基于 JavaScript 的，因此它由大量細粒度的 JavaScript 組件組成。 但是，有一種特殊的組件來呈現(xiàn) CMS 內(nèi)容。 CMS 組件在運行時動態(tài)添加。 由后端提供的 CMS 組件類型映射到等效的 JavaScript 組件。 映射以可定制的配置提供。 這允許您配置自定義組件以呈現(xiàn)特定的 CMS 組件。

此外，可以定制特定于組件的業(yè)務邏輯。 這需要額外的配置，其中自定義服務可以提供給（默認）組件。

通過此設(shè)置，可以通過以下方式自定義 CMS 組件：

您可以向 ConfigModule 或直接向 B2cStorefrontModule 提供 CMS 組件配置。 下面的配置展示了如何為 CMS BannerComponent 配置一個自定義的 Angular 組件：

ConfigModule.withConfig({cmsComponents: {BannerComponent: {component: CustomBannerComponent;}} });

可以在 CMS 映射中使用動態(tài)導入來實現(xiàn)延遲加載的 CMS 組件和代碼拆分。

動態(tài)導入應定義為箭頭函數(shù)，如下例所示：

ConfigModule.withConfig({cmsComponents: {BannerComponent: {component: () =>import('./lazy-banner/lazy-banner.component').then((m) => m.LazyBannerComponent),}} });

為代碼拆分解析塊是在構(gòu)建時完成的，并且取決于代碼的導入方式。 如果主塊中至少有一個靜態(tài)導入可用，則代碼將被靜態(tài)捆綁，并且不會生成單獨的塊。

Accessing CMS Data in CMS Components

與組件相關(guān)的 CMS 數(shù)據(jù)在實例化期間由 CmsComponentData 服務提供給組件。 CmsComponentData 服務包含組件 uid 和 data$，它是組件有效負載的可觀察對象。 通過使用 Angular 依賴注入 (DI) 系統(tǒng)，組件和特定于組件的服務可以使用 CmsComponentData。

Customizing Services

使用（復雜）業(yè)務邏輯的 Spartacus CMS 組件會將其委托給服務。 這簡化了可擴展性，并且出于以下原因也被推薦：

• 組件僅依賴于單個服務
• 該服務可能有其他依賴項
• 可以為自定義業(yè)務邏輯提供自定義服務

組件服務被設(shè)計為非 singleton 服務，范圍限定于組件，因此它們可以直接訪問組件范圍中提供的 CmsComponentData。 這種設(shè)計不適用于 Angular DI 系統(tǒng)，因為 DI 系統(tǒng)沒有提供在不更改組件的情況下 overwrite 組件服務的機制。

但是，要配置自定義組件服務，您可以以類似的方式提供服務。 配置是根據(jù)組件配置完成的。 在以下示例中，SearchComponent 提供了一個自定義 SearchBoxComponentService：

ConfigModule.withConfig({cmsComponents: {SearchBoxComponent: {providers: [{provide: SearchBoxComponentService,useClass: CustomSearchBoxComponentService,deps: [CmsComponentData, ProductSearchService, RoutingService]}];}} });

Guarding Components

通常情況下，某些路線應僅在特定條件下才可訪問（即，個人詳細信息頁面應僅為登錄用戶打開）。 為此，我們可以使用 Angular Route Guards 在進入路由之前執(zhí)行一些邏輯（即從后端獲取數(shù)據(jù)或檢查用戶是否通過身份驗證）并決定是否可以打開它或我們應該重定向到其他頁面。

頁面的內(nèi)容通常是 CMS 驅(qū)動的，因此在 Spartacus 中提出了為每個 CMS 組件配置守衛(wèi)。 在從后端加載頁面的 CMS 組件后，這些組件的所有 Guard 都會被執(zhí)行。 如果至少有一個守衛(wèi)決定（即由于缺少身份驗證），它允許重定向到其他頁面。

注意：當同一頁面的多個組件有相同的guard（即AuthGuard）時，只會執(zhí)行一次。

下面是如何為 CMS 組件配置守衛(wèi)的示例：

ConfigModule.withConfig({cmsComponents: {CheckoutProgress: {component: CheckoutProgressComponent,guards: [AuthGuard, CartNotEmptyGuard],},} });

Controlling Server Side Rendering (SSR)

您可能不想在服務器中呈現(xiàn)所有 CMS 組件。 以下是一些何時不在服務器中呈現(xiàn) CMS 組件的示例：

• CMS 組件需要個性化的輸入，并且不應該或不能在沒有它的情況下呈現(xiàn)
• SSR 輸出不需要 CMS 組件，出于性能原因，它將從渲染過程中刪除
• CMS 組件與外部服務交互（延遲）并且與索引和社交共享無關(guān)

雖然可以在組件中添加條件邏輯以在 SSR 中呈現(xiàn)（部分）視圖，但 Spartacus 為組件提供了一種配置，使其更通用，并避免組件中的任何特定邏輯。 下面是一個例子：

ConfigModule.withConfig({cmsComponents: {SearchBoxComponent: {disableSSR: true}} });

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus Customizing CMS Components的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。