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

如果直接访问如下 url:

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


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


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

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


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


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

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

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


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


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


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


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


通过依赖注入完成的:


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

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


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

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


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


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


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


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



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

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


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


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


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


路由就挂了:

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


上一篇:Iterable接口


下一篇:PHP Log时时查看小工具