SAP Spartacus UI開發的guideline：

UI components bind to observable data from the back end, using the standard Angular async pipe.

UI Component綁定到從后臺返回的Observable數據.

看個例子：

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

title$是消費cx-carousel的Component傳入的Observable對象。

this.componentData$是從Commerce Cloud后臺返回的原始數據，但是UI展示只對title感興趣，所以調用map operator進行數據映射。

title$的數據源，componentData$, 也是一個Observable，來自ComponentData.data$調用pipe執行filter操作后的結果：

運行時title$的值通過async pipe取出：

operator里能看到map操作：

這個Observable是通過另一個Observable執行filter操作得到的：

這個source指向的Observable就是componentData.data$:

async pipe的實現類是AsyncPipe，實現了PipeTransform接口的transform方法：

transform方法里執行subscribe, 觸發Observable的執行：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular async pipe在Component html模板中的一个实际应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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