SAP Spartacus里cx-carousel的实现

简介: SAP Spartacus里cx-carousel的实现

实现源代码:image.pngimage.pngcx-carousel Component的几个属性:

  • items
  • title
  • template

进到carousel的实现文件里:

storefrontlib\src\shared\components\carousel\carousel.component.tsimage.pngitems的类型:Observable数组

image.pngtemplate属性:image.pngcx-carousel本身作为一个reuse library,它不知道template应该如何渲染,因此需要cx-carousel的consumer,在这个例子里即product-carousel.component.html在消费时将自己的template通过template属性传入:


image.pngcarousel里的carousel-panel:

image.png运行时:

image.pngdiv的层级结构:

image.png运行时:div class = slides,slide,itemimage.png这里可以看到辅助信息,ng-reflect-ng-if显示出运行时if的评估条件:true

image.pngimage.png这个normalizeDebugBindingName比较有用:image.pngnormalizeDebugBindingValue(value);

这里将消费端指定的template属性绑定到carousel ng-container的*ngTemplateOutlet属性里:image.png

相关文章
|
9月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
|
9月前
|
存储
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
|
9月前
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
|
9月前
|
API
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
|
2月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
2月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
2月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
|
9月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
|
9月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
|
9月前
|
前端开发 JavaScript API
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略