首先创建一个新的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博客 ” ,链接:https://blog.itpub.net/24475491/viewspace-2735924/ ,如需转载,请注明出处,否则将追究法律责任。