實現源代碼：

<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的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。