首先創(chuàng)建一個(gè)新的Angular module和Component：

這個(gè)新的module，因?yàn)橐褂肙utlet功能，所以需要從@Spartacus/storefront里導(dǎo)入OutletRefModule，以及導(dǎo)出我們自己實(shí)現(xiàn)的MyOutletsComponent以便讓外界消費(fèi)。

MyOutletsComponent的實(shí)現(xiàn)：

在構(gòu)造函數(shù)里注入currentProductService, 調(diào)用getProduct方法異步讀取當(dāng)前product屬性，存儲(chǔ)在屬性product$里：

在這個(gè)Component的html里，顯示product$的值：

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before" let-model><h1>Jerry</h1><p>Product: {{ product$ | async | json }}</p> </ng-template>

最后別忘了把Component的selector標(biāo)簽加到app Component的html里：

最后的效果：

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的在SAP Spartacus产品明细页面用outlet显示自定义数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。