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

• 2020 年 12 月 3 日
• AI

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

最後的效果：