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

首先建立一個新的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的原創文章，請關注公衆號"汪子熙":