天天看點

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

首先渲染若幹個 div button,個數等于 TabContainer 裡包含的 Component 元素個數。

SAP Spartacus UI TabParagraphContainerComponent 的工作原理
SAP Spartacus UI TabParagraphContainerComponent 的工作原理
SAP Spartacus UI TabParagraphContainerComponent 的工作原理
SAP Spartacus UI TabParagraphContainerComponent 的工作原理
SAP Spartacus UI TabParagraphContainerComponent 的工作原理

integration lib 提供的 CMS mapping 沒有生效。

但我看到已經配置進去了?

這不是調用了嗎?

SAP Spartacus UI TabParagraphContainerComponent 的工作原理
SAP Spartacus UI TabParagraphContainerComponent 的工作原理

我查過了,無論 this.staticCmsConfig 還是 this.config.cmsComponents, 都沒有 Visual 開頭的 Component.

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

Visual Module 也調用了,為啥 上述兩個結構裡都沒有?

構造函數裡設定斷點,看看 config 的值:

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

CMSComponents 裡此時就已經沒有 Visual Component 了:

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

components 字段包含了 TabPanelContainer 應該顯示的 Component 集合。

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

Flex type 字段值會用在 Angular Component 的映射關系維護上。

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

product detail 已經成功加載了:

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

div button 對應 tab 的标簽。然後專門有一個 active div,顯示标簽點選後對應的實際内容。

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

Spec 頁面,必須當該産品存在 classification 屬性時才有值:

SAP Spartacus UI TabParagraphContainerComponent 的工作原理
SAP Spartacus UI TabParagraphContainerComponent 的工作原理

繼續閱讀