SAP 电商云 Spartacus UI product 明细页面的路由配置

简介: SAP 电商云 Spartacus UI product 明细页面的路由配置

如果直接访问如下 url:

http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115


image.png


页面打开后,没有看到和 product 相关的执行逻辑:

image.pngimage.png


这个 cxRoute: ‘product’ 是哪里维护的?


image.pngimage.png

看这个高亮区域是从哪里赋值的?

image.png


在 routing.module.js 里,一个初始化钩子:


image.png


调试 35行这个 router 是如何被计算出来的即可:


image.png


通过依赖注入完成的:


image.png

根据如下关键字搜索:cxRoute: 'product


image.png

必须和 default-routing-config.ts 里定义的这个 product 字符串的大小写完全一致:


image.pngimage.png


最后发现了 product-details-page.module.ts 里调用了 Angular 标准的路由 API:RouterModule.forChild


image.png


component:路径匹配时实例化的组件。Spartacus UI 里使用的是 PageLayoutComponent,这是一个 generic Component.



image.png

data 属性:ActivatedRoute 提供给组件的由开发人员定义的额外数据。默认情况下,不传递任何额外数据。


Spartacus UI 传递了 cxRoute: ‘product’ 作为额外属性。


做个实验,把 ProductDetailsPageModule 的路由配置里的 cxRoute,改成 login:


image.pngimage.png


路由就挂了:

image.png


相关文章
|
5月前
|
UED
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
|
5月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
5月前
|
存储 供应链 搜索推荐
Spartacus product variant configuration sample data
Spartacus product variant configuration sample data
|
5月前
|
监控 数据挖掘 定位技术
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
|
5月前
|
设计模式 API 数据处理
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
|
5月前
|
供应链 搜索推荐 安全
Spartacus configurable product CONF_HOME_THEATER_ML 的 category
Spartacus configurable product CONF_HOME_THEATER_ML 的 category
|
5月前
|
存储 供应链 前端开发
Spartacus home page 渲染时,就会读取 carousel 里的 product 数据
Spartacus home page 渲染时,就会读取 carousel 里的 product 数据
|
5月前
|
前端开发 JavaScript 安全
Spartacus product summary 页面的设计原理
Spartacus product summary 页面的设计原理
|
5月前
|
存储 监控 数据库
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
|
5月前
|
监控 安全 数据管理
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
下一篇
无影云桌面