SAP Spartacus里cx-carousel的实现

实现源代码：

<cx-carousel[items]="items$ | async"[title]="title$ | async"[template]="carouselItem"itemWidth="285px"
>
</cx-carousel>

cx-carousel Component的几个属性：

items
title
template

进到carousel的实现文件里：
storefrontlib\src\shared\components\carousel\carousel.component.ts

items的类型：Observable数组

template属性：

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

carousel里的carousel-panel：

运行时：

div的层级结构：

运行时：div class = slides,slide,item

这里可以看到辅助信息，ng-reflect-ng-if显示出运行时if的评估条件：true

这个normalizeDebugBindingName比较有用：

normalizeDebugBindingValue(value);

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

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP Spartacus里cx-carousel的实现相关推荐

SAP Spartacus里Product Carousel componentData取数据的逻辑研究
Product Carousel的ComponentData通过构造函数注入: 通过查看componentData.data$.operator.project就能知道这个Observable的Ope ...
SAP Spartacus 里的 icon 设计
同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon 设计,比如下图的 iconTypes.RESET: 需要调用 iconLoader 获取 RESET icon ...
Media Query在SAP Spartacus里的用途
Media queries are useful when you want to modify your site or app depending on a device's general ty ...
SAP Spartacus里的feature module
SAP Spartacus里Component的使用受featureModule控制:
SAP Spartacus里product数据请求的HTTP url是在哪里维护的
我们打开SAP Spartacus home页面时,能观察到product carousel里待显示的product数据从后台被请求: 随便点开一个url,格式如下: https://jerry.ea ...
SAP Spartacus 里的 .release-it.json 文件
在 SAP Spartacus package.json 里有一个依赖叫做 release-it: 这个工具的链接:https://github.com/release-it/release-it 这 ...
如何找到 SAP Spartacus 里某个 Component TypeScript 编译后生成的 JavaScript 位置
需求如何找到触发该网络请求的准确代码位置? 从 initiator 里查看调用栈上下文,一点头绪也没有. 找到触发该网络请求的控件的 selector:cx-register 在 Storefron ...
SAP Spartacus 里的 cxOutletRef 指令执行过程分析
先看 cxOutletRef 指令的效果:ng-template 里定义了如下图标 1 区域所示的自定义 UI,通过 cxOutletRef, 将其插入到图标 2 所示的 ProductDetails ...
SAP Spartacus里的localStorage用法
window-ref.ts: get nativeWindow(): Window {return typeof window !== 'undefined' ? window : undefined ...
SAP Spartacus里modifiedtime的大小写问题
从cms返回的Component数据,modifiedtime全部小写: https://github.com/SAP/spartacus/issues/2521 这个issue里,把所有modifi ...

SAP Spartacus里cx-carousel的实现

SAP Spartacus里cx-carousel的实现相关推荐

最新文章

热门文章