首先建立一個新的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裡：

最後的效果：

在SAP Spartacus產品明細頁面用outlet顯示自定義資料

相關文章