在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裡:
最後的效果:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2735924/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Mysql資料庫之多表查詢、事務、DCL資料庫MySQL
- SAP Spartacus的page請求
- Mysql資料安全備份MySQL
- jsp頁面表單不輸入卻能登入成功?
- Redis資料結構之整數集合資料結構Redis
- 【資料結構】二叉樹的建立與遍歷演算法資料結構
- 基於深度對抗學習的智慧模糊資料生成方法
- 你211研究生不好好學你的專業,為什麼自學大資料開發?
- 36氪研究院:2020年中國服裝行業資料中臺研究報告(附下載)
- 金融科技創新發展研究報告:資料要素與金融科技創新
- 腦機介面資料分析工具EEGLAB04---繪製通道光譜圖
- 微信小程式父子元件之間的資料傳遞
- 如何避免資料庫被黑資料庫
- 手把手教你學Python之基本資料型別Python
- 今日資料行業日報(2020.11.23)『預計今年黑色星期五網路銷售額增長45%』
- Hadoop3.2.1 【 HDFS 】原始碼分析 : DataXceiver: 讀取資料塊 解析 [二]Hadoop
- Mysql binlog備份資料及恢復資料,學會這個,我在也不怕刪庫跑路啦~MySQL
- 5G革命:如何讓「資料」實現最大效能?