首先創建一個新的Angular module和Component：

這個新的module，因為要使用Outlet功能，所以需要從@Spartacus/storefront里導入OutletRefModule，以及導出我們自己實現的MyOutletsComponent以便讓外界消費。

MyOutletsComponent的實現：

在構造函數里注入currentProductService, 調用getProduct方法異步讀取當前product屬性，存儲在屬性product$里：

在這個Component的html里，顯示product$的值：

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

最后別忘了把Component的selector標簽加到app Component的html里：

最后的效果：

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

總結

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

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