在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的原创文章，请关注公众号"汪子熙":

在SAP Spartacus产品明细页面用outlet显示自定义数据相关推荐

SAP Spartacus产品明细页面用Observable显示产品名称
具体实现: import { Component, OnInit } from '@angular/core'; import { ActiveCartService, Product } from ...
如何在 SAP Spartacus 产品明细页面添加自定义 UI
产品明细页面 Product Detail Page,简称 PDP. 首先在页面上找到 Component selector:cx-tab-paragraph-container: 对应的 Angul ...
SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
如下图所示,为了减少 SAP 电商云 Spartacus 客户实施时不必要的配置,Spartacus 将不少页面的路由路径的默认配置,定义在如下的 default-routing-config.ts ...
为什么 SAP 电商云 Spartacus 产品明细页面的自定义 matcher 会重复被调用
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI 为什么打开一个 product 明细页 ...
如何自定义SAP Spartacus 产品明细的url pattern
在Spartacus源代码的storefrontlib/src/cms-structure/routing/default-routing-config.ts文件里,能看到Spartacus产品页面的 ...
SAP Spartacus 产品明细页面的 url 设计和数据源
明细页面 url: http://localhost:4200/electronics-spa/en/USD/OpenCatalogue/Cameras/Digital-Cameras/Digital ...
SAP Spartacus的登录页面的用户名显示逻辑
SAP Spartacus登录页面如下图所示: 通过login form用户输入的用户名和密码去换取token,拿到token后,调用另一个API,将token作为Authorization字段输入: ...
SAP Spartacus Product 明细页面 meta description 标签页的数据源
例子: http://localhost:4200/Open-Catalogue/Cameras/DigitalCameras/Digital-SLR/DSLR-A330-%252BDT-18-55- ...
SAP Spartacus产品转盘页面(ProductCarousel)的产品数据批量加载实现细节
实现源代码: getMany(products: ScopedProductData[]): ScopedProductData[] {console.log('Jerry in getMany: ' ...

在SAP Spartacus产品明细页面用outlet显示自定义数据

在SAP Spartacus产品明细页面用outlet显示自定义数据相关推荐

最新文章

热门文章