- SAP 电商云 Spartacus UI 的 Product C
- SAP 电商云 Spartacus UI product 明细页
- 网站上的 breadcrumb 使用场景浅析
- SAP UI5 sap.ui.vk 命名空间内的控件介绍
- HTML 按钮(button)的 disable 属性和 dis
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
- SAP 电商云 Spartacus UI Proxy Facad
- Angular @Injectable 注解的工作原理浅析
- 关于 Angular 部署以及 index.html 里 bas
- SAP 电商云 Spartacus UI 从 CMS 取回 sl
如果直接访问如下 url:
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115
![](https://img.haomeiwen.com/i2085791/e23f05097476740a.png)
页面打开后,没有看到和 product 相关的执行逻辑:
![](https://img.haomeiwen.com/i2085791/e1c55d6deeb9df64.png)
![](https://img.haomeiwen.com/i2085791/ed87f368440dde43.png)
这个 cxRoute: 'product' 是哪里维护的?
![](https://img.haomeiwen.com/i2085791/5ccfd51ebac0655a.png)
![](https://img.haomeiwen.com/i2085791/84941756fabbc2ac.png)
看这个高亮区域是从哪里赋值的?
![](https://img.haomeiwen.com/i2085791/d88d309c80a8c05d.png)
在 routing.module.js 里,一个初始化钩子:
![](https://img.haomeiwen.com/i2085791/96e2f61e908fa94c.png)
调试 35行这个 router 是如何被计算出来的即可:
![](https://img.haomeiwen.com/i2085791/046e6a1846a709a7.png)
通过依赖注入完成的:
![](https://img.haomeiwen.com/i2085791/1bedde7891d74702.png)
根据如下关键字搜索:cxRoute: 'product
![](https://img.haomeiwen.com/i2085791/e97877619b3cd5af.png)
必须和 default-routing-config.ts 里定义的这个 product 字符串的大小写完全一致:
![](https://img.haomeiwen.com/i2085791/7839104b0f1f252b.png)
最后发现了 product-details-page.module.ts 里调用了 Angular 标准的路由 API:RouterModule.forChild
![](https://img.haomeiwen.com/i2085791/f825fcbb35c43453.png)
component:路径匹配时实例化的组件。Spartacus UI 里使用的是 PageLayoutComponent,这是一个 generic Component.
![](https://img.haomeiwen.com/i2085791/38479c7c7db52b5d.png)
data 属性:ActivatedRoute 提供给组件的由开发人员定义的额外数据。默认情况下,不传递任何额外数据。
Spartacus UI 传递了 cxRoute: 'product' 作为额外属性。
做个实验,把 ProductDetailsPageModule 的路由配置里的 cxRoute,改成 login:
![](https://img.haomeiwen.com/i2085791/e9e3b08ea5d63a71.png)
路由就挂了:
![](https://img.haomeiwen.com/i2085791/2e1bf0f5dcb4de21.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)
网友评论