app Component里注入current Product service：

實現(xiàn)代碼：

import { Component, OnInit } from '@angular/core'; import { ContentSlotComponentData } from '@spartacus/core'; import { CurrentProductService } from '@spartacus/storefront'; import { DebugConfig } from './app.module';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })export class AppComponent implements OnInit {constructor(private config: DebugConfig, private currentProductService: CurrentProductService) {console.log(config);}title = 'Jerry Store';myproduct$ = this.currentProductService.getProduct();componentMeta: ContentSlotComponentData = {uid: 'ElectronicsHomepageSplashBannerComponent',typeCode: 'SimpleResponsiveBannerComponent',flexType: 'SimpleResponsiveBannerComponent'};ngOnInit(): void {/*const factory = this.componentFactoryResolver.resolveComponentFactory(MycomComponent);this.outletService.add('header', factory, OutletPosition.BEFORE);*/} }

在Component html里，用async和json pipe將myproduct$的數(shù)據(jù)以json格式顯示：

隨便打開一個產(chǎn)品的明細頁面，就可以看到json數(shù)據(jù)了：

{"code": "300938","name": "Photosmart E317 Digital Camera","summary": "Point and shoot simplicity in a 5 MP camera.","price": {"formattedValue": "$114.12","currencyIso": "USD","priceType": "BUY","value": 114.12},"images": {"PRIMARY": {"zoom": {"altText": "Photosmart E317 Digital Camera","format": "zoom","imageType": "PRIMARY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wxMzkzNnxpbWFnZS9qcGVnfGltYWdlcy9oMjYvaDdhLzg3OTcyNTE0NjkzNDIuanBnfGU3N2FlYWQ1YmQ1ODhjZjZiNTFjNDg3NDdjNGRkNjM5NGQzMjZmZWVmNjc3ZWQwMjgzY2MyNDJlNzYyNTczM2Q"},"product": {"altText": "Photosmart E317 Digital Camera","format": "product","imageType": "PRIMARY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3w3MDg1fGltYWdlL2pwZWd8aW1hZ2VzL2g2Ni9oOWQvODc5NzI3Nzc0OTI3OC5qcGd8NzdjOTNiMThkODQ4NTM4NmQ2NjMxMGMwYmMyOTIwODIwMzI4NTgyMGUxNDc4Y2I0OTRkOGViODNlNDZiYTJhNw"},"thumbnail": {"altText": "Photosmart E317 Digital Camera","format": "thumbnail","imageType": "PRIMARY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wyMDYxfGltYWdlL2pwZWd8aW1hZ2VzL2g3ZS9oZmEvODc5NzMwNDA5NDc1MC5qcGd8OGZjMTNjM2JmMGY0MmYyMWY3OGM5YjQ4YjAyNzM4NjkxYjUyMmQzMDBhMmMzMjMwZThmMjI4OWMwZjg1NmYzMw"},"cartIcon": {"altText": "Photosmart E317 Digital Camera","format": "cartIcon","imageType": "PRIMARY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wxNDQwfGltYWdlL2pwZWd8aW1hZ2VzL2gxNS9oZmYvODc5NzMzMDQ0MDIyMi5qcGd8ODU0ZWQwMjY5OWE5OTBlZjc0ZGFhZTU4ZWYwNDk4ODFmZmM1ZTg2ZjIxOWFiZTBkZmU0NDBmMDBiNTYyMzdlYg"}},"GALLERY": [{"zoom": {"altText": "Photosmart E317 Digital Camera","format": "zoom","galleryIndex": 0,"imageType": "GALLERY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wxMzkzNnxpbWFnZS9qcGVnfGltYWdlcy9oMjYvaDdhLzg3OTcyNTE0NjkzNDIuanBnfGU3N2FlYWQ1YmQ1ODhjZjZiNTFjNDg3NDdjNGRkNjM5NGQzMjZmZWVmNjc3ZWQwMjgzY2MyNDJlNzYyNTczM2Q"},"product": {"altText": "Photosmart E317 Digital Camera","format": "product","galleryIndex": 0,"imageType": "GALLERY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3w3MDg1fGltYWdlL2pwZWd8aW1hZ2VzL2g2Ni9oOWQvODc5NzI3Nzc0OTI3OC5qcGd8NzdjOTNiMThkODQ4NTM4NmQ2NjMxMGMwYmMyOTIwODIwMzI4NTgyMGUxNDc4Y2I0OTRkOGViODNlNDZiYTJhNw"},"thumbnail": {"altText": "Photosmart E317 Digital Camera","format": "thumbnail","galleryIndex": 0,"imageType": "GALLERY","url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wyMDYxfGltYWdlL2pwZWd8aW1hZ2VzL2g3ZS9oZmEvODc5NzMwNDA5NDc1MC5qcGd8OGZjMTNjM2JmMGY0MmYyMWY3OGM5YjQ4YjAyNzM4NjkxYjUyMmQzMDBhMmMzMjMwZThmMjI4OWMwZjg1NmYzMw"}}]},"nameHtml": "Photosmart E317 Digital Camera","nameForUrl": "photosmart-e317-digital-camera","baseOptions": [],"purchasable": true,"averageRating": 4.5,"stock": {"isValueRounded": false,"stockLevel": 314,"stockLevelStatus": "inStock"},"description": "Get point and shoot simplicity plus crisp, true-to-life photos with this stylish and easy-to-use camera.<br/><br/>Get close in with 4x digital zoom, review via the clear 3.8 cm LCD then print great 10 × 15 cm photos and enlargements up to poster size.","availableForPickup": true,"url": "/electronics-spa/products/300938","numberOfReviews": 22,"manufacturer": "HP","categories": [{"code": "576","name": "Digital Compacts","url": "/Open-Catalogue/Cameras/Digital-Cameras/Digital-Compacts/c/576"},{"code": "brand_1","name": "HP","url": "/Brands/HP/c/brand_1"}],"priceRange": {},"configurable": false }

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

總結

以上是生活随笔為你收集整理的获取SAP Spartacus当前显示产品json数据的又一办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。