SAP Spartacus UI TabParagraphContainerComponent 的工作原理

首先渲染若干个 div button,个数等于 TabContainer 里包含的 Component 元素个数。

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

然后是利用 cxComponentWrapper 加载真实的 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 的工作原理

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

product detail 已经成功加载了:
SAP Spartacus UI TabParagraphContainerComponent 的工作原理

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

div button 对应 tab 的标签。然后专门有一个 active div,显示标签点击后对应的实际内容。

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

Spec 页面,必须当该产品存在 classification 属性时才有值:

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

SAP Spartacus UI TabParagraphContainerComponent 的工作原理

更多Jerry的原创文章,尽在:“汪子熙”:
SAP Spartacus UI TabParagraphContainerComponent 的工作原理

上一篇:Visual Studio插件CodeRush今年第二个重大版本发布——v21.2.3


下一篇:使用 Visual Studio 2019 开发 Linux C++ 应用程序(四)