关于sap:在SAP-Spartacus产品明细页面用outlet显示自定义数据

64次阅读

共计 497 个字符,预计需要花费 2 分钟才能阅读完成。

首先创立一个新的 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 的原创文章,请关注公众号 ” 汪子熙 ”:

正文完
 0