如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI

创建一个新的module：

ng g m myOutlets

再基于该module创建一个Component，注意module的命名规范：

在生成的MyOutletsModule里，导入OutletRefModule：

在新建的module的Component html里，输入如下html代码：

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before">
<p>Jerry PlaceHolder</p>
</ng-template>

在新建的module里导出myOutlet Component：

在app module里，导入OutletRef module和我自己新建的myOutLet module：

最后一步，在app Component html里加入我新建的Component的selector：

最后的效果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI相关推荐

为什么 SAP 电商云 Spartacus 产品明细页面的自定义 matcher 会重复被调用
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI 为什么打开一个 product 明细页 ...
SAP Commerce Cloud 产品明细页面设计概述
url:http://localhost:4299/electronics-spa/en/USD/jerryproduct/300938/Photosmart%20E317%20Digital%20C ...
SAP Spartacus Org Unit明细页面的工具栏按钮设计
工具栏上肉眼可见两个按钮:Edit和Disable 其中Edit按钮通过a标签实现: 而disable通过自定义的cx-org-toggle-status实现: 从最后渲染出的html页面里能看出,c ...
SAP Spartacus Org Unit明细页面的设计原理
该页面分三部分组成. 其中蓝色和绿色两个区域的实现如下:两个section标签页: section是HTML标准的标签之一,每个标签通过h1到h6不等的heading标签标识. 运行时渲染的HTML原 ...
SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
如下图所示,为了减少 SAP 电商云 Spartacus 客户实施时不必要的配置,Spartacus 将不少页面的路由路径的默认配置,定义在如下的 default-routing-config.ts ...
如何在 SAP Spartacus 产品明细页面添加自定义 UI
产品明细页面 Product Detail Page,简称 PDP. 首先在页面上找到 Component selector:cx-tab-paragraph-container: 对应的 Angul ...
如何找出 SAP电商云产品明细页面读取后台数据的代码具体位置
以如下这个产品明细页面为例: http://localhost:4200/electronics-spa/en/USD/product/553637/nv10 观察浏览器 url 的格式:/produ ...
SAP Spartacus 404 Not found页面的显示机制 - canActivateNotFoundPage
这个方法位于类CmsPageGuardService内. 当我们请求一个实际并不存在的page时, 因为1这个path对应的route configuration里的protected字段为undef ...
自定义SAP Spartacus的产品搜索API参数 - Product Search
SAP Spartacus默认采用的产品搜索url配置在这个文件里: C:\Code\SPA\spartacus\projects\core\src\occ\adapters\product\defa ...

如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI

如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI相关推荐

最新文章

热门文章