该指令的作用是动态加载Component

如果将page-slot.component.html里的cxComponentWrapper指令注释掉：

最后渲染的页面将会一片空白：

如果仅仅打印position的值：

能看到SAP Spartacus所有可用的position：

如果将Component数据全部打印出来：

效果如下：

只渲染position为MiniCart的Component：

最后效果如下：

只有MiniCart被渲染了出来：

完整代码：

<ng-template[cxOutlet]="position"[cxOutletContext]="{ components$: components$ }"
><ng-template*ngFor="let component of components"[cxOutlet]="component.flexType"[cxOutletContext]="{ component: component }"[cxOutletDefer]="getComponentDeferOptions(component.flexType)"(loaded)="isLoaded($event)"><div>position: {{ position }}</div><ng-container *ngIf="position === 'MiniCart'" [cxComponentWrapper]="component"></ng-container></ng-template>
</ng-template>

MiniCartComponent的Angular Component和CMS Component同名：

从OCC API返回的MiniCartComponent数据：

从上图能看出，Spartacus使用的CMS API，读取的page数据，类型字段名称为typeCode, 而Spartacus CMS mapping使用的字段为flexType, 因此需要Spartacus的convertor / normalizer，在字段typeCode和flexType之间做转换。

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus使用cxComponentWrapper测试MiniCart相关推荐

SAP Spartacus的cxComponentWrapper指令
Jerry之前的文章已经把component结构的三个字段,uid,typeCode和flexType都打印出来了. 本文研究和[cxComponentWrapper]如何动态加载和渲染Compone ...
如何运行 SAP Spartacus cypress 端到端测试
首先在本地启动 Spartacus instance, 比如执行 b2c.bat: 进入文件夹:projects/storefrontapp-e2e yarn install: 然后 yarn cy: ...
SAP Spartacus Session affinity
参见这个讨论. 后端运行在多个 pods/节点时,当子序列请求过早进入时,后端将无法跨集群发送缓存失效请求.此外,如果多个请求分散在多个节点上,则会消耗延迟和不必要的资源. 对于单个客户端,Spart ...
SAP Spartacus 4.0 的技术变化
在您迁移到 4.0 版库之前,我们强烈建议您切换到新的应用程序结构和新的功能库. 在多个小步骤中进行迁移更容易(迁移到新的应用程序结构,切换到提取的功能库,然后迁移到 4.0),您可以确保在每一步之后 ...
SAP Spartacus 里的 .release-it.json 文件
在 SAP Spartacus package.json 里有一个依赖叫做 release-it: 这个工具的链接:https://github.com/release-it/release-it 这 ...
SAP Spartacus UI Duplicated keys has been found in the config of i18n chunks
在测试 SAP Spartacus 3.4.5 版本的 SSR 功能时,发现一个 warning 信息: console.warn(`Duplicated keys has been found in ...
SAP Spartacus 的会话管理 Session Management
官网从一开始,Spartacus 就包含了客户端身份验证和用户身份验证. 尽管这对于 Web 应用程序来说并不常见,但对于 Spartacus 来说是必须的,因为后者需要使用 OCC API. 客户 ...
SAP Spartacus Definition of Done
SAP Spartacus Definition of Done Coding guidelines Spartacus 团队采用了以下一组规则来保持 Spartacus 代码的可读性和可维护性. 作 ...
SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较
You can only create new components in the WCMS Page View perspective. In the Live Edit perspective, ...

SAP Spartacus使用cxComponentWrapper测试MiniCart

该指令的作用是动态加载Component

SAP Spartacus使用cxComponentWrapper测试MiniCart相关推荐

最新文章

热门文章