共计 1239 个字符，预计需要花费 4 分钟才能阅读完成。
如图：假如咱们通过下列 url，关上 SAP Spartacus 一个产品的明细页面，咱们想找出是哪个 Angular Component，实现了该明细页面。
http://localhost:4200/electro…
关上 Chrome 开发者工具，查看 Product 明细页面的 HTML 源代码，能找到 cx-page-layout 节点，class 值为 ProductDetailsPageTemplate.
因而，Product 明细页面，不是通过繁多的 Angular Component 实现，而是由若干 Angular Components 独特组合而成，这些 Angular Components，从语义上说，都放在 ProductDetailsPageTemplate 这个模板容器之内。
https://localhost:9002/cmscoc… 关上 SAP Hybris CMS Cockpit：
搜寻：
ProductDetailsPageTemplate 的每一个 Content Slot，能够搁置一个或者多个 CMS Component，而每一个 CMS Component，又对应一个 Spartacus Angular Component：
Spartacus 利用启动时，关上 Product Detail 页面之后，能察看到这个 HTTP 申请：
https://api.cg79x9wuu9-eccomm…
读取的正是 Product detail template 和其蕴含的 Content Slot 信息：
下图彩色高亮的 FooterNavigationComponent，即是 Product 明细页面 Footer 区域的 CMS Component 名称。
咱们只须要依据该名称，在 SAP Spartacus 源代码里进行搜寻，即可找到同名的 Angular Component：
为了验证咱们找到的 Component 是否正确，咱们在其 template 实现文件里轻易做一些批改：
果然在 footer 区域看到了此批改，阐明咱们找到的 Component 是正确的。
当然，如果是 partner 应用 SAP Spartacus library 进行二次开发，没有方法间接批改源代码，能够应用 outlet 的形式，对 Product 明细页面某个 Component 进行加强。
在 SAP Spartacus 启动 Component 的 HTML 页面里，削减如下代码：
<ng-template cxOutletRef="FooterNavigationComponent" cxOutletPos="before" let-model>
<div class="before-pdp">
Jerry 对 Footer 的加强
</div>
</ng-template>这段代码的语义是，将绿色区域的自定义 UI 片段，动静插入到 Angular Component FooterNavigationComponent 的 UI 之前 (cxOutletPos=”before” 的成果)
最初的成果：
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: