实现源代码:cx-carousel Component的几个属性:
- items
- title
- template
进到carousel的实现文件里:
storefrontlib\src\shared\components\carousel\carousel.component.tsitems的类型: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属性里: