标签：product Spartacus Component Jerry module outlet MyOutletsComponent 定义数据

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

标签：product,Spartacus,Component,Jerry,module,outlet,MyOutletsComponent,定义数据
来源： https://www.cnblogs.com/sap-jerry/p/14026561.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。