- SAP 电商云 Spartacus UI 的 Product C
- 网站上的 breadcrumb 使用场景浅析
- SAP UI5 sap.ui.vk 命名空间内的控件介绍
- HTML 按钮(button)的 disable 属性和 dis
- Angular 如何根据一个 class 的定义和数据,动态创建
- SAP 电商云 Spartacus UI 实现的 ngrx-ro
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
- SAP 电商云 Spartacus UI Proxy Facad
- Angular @Injectable 注解的工作原理浅析
- 关于 Angular 部署以及 index.html 里 bas
如果直接访问如下 url:
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115
![](https://img.haomeiwen.com/i2085791/40615d3ccaed8b0e.png)
页面打开后,没有看到和 product 相关的执行逻辑:
![](https://img.haomeiwen.com/i2085791/1d8f0949efb83a66.png)
![](https://img.haomeiwen.com/i2085791/77652c7ef99894cd.png)
我们自定义的 ActivatedRouterStateSnapshot interface,和上图 Chrome 调试器里打印的结构很像:
![](https://img.haomeiwen.com/i2085791/9c3e33473391f64a.png)
先在这个 reducer 里设置断点:
![](https://img.haomeiwen.com/i2085791/0fcc524b51d78ca9.png)
打印出了海量的日志。我们先不管是谁触发的这些 reducer 调用,先查看和 product 相关的日志:
![](https://img.haomeiwen.com/i2085791/3d49b8a70d2e91ec.png)
很像这两行:
![](https://img.haomeiwen.com/i2085791/f2c415cc0e7a8900.png)
果然,这里已经解析出 navigation target 了:
![](https://img.haomeiwen.com/i2085791/9b8ec1af38cf3256.png)
执行到这的时候,mavigation 的目标页面已经被解析出来了:
![](https://img.haomeiwen.com/i2085791/717fe67018b7ba41.png)
![](https://img.haomeiwen.com/i2085791/fdf821c2074bcf91.png)
选择 cmsRequired 作为突破口。
在这个 serialize 方法里设置断点:
![](https://img.haomeiwen.com/i2085791/4d2d7704401ac68d.png)
输入参数仅仅包含了一个 url:
![](https://img.haomeiwen.com/i2085791/f1000f271bd80f04.png)
这个 cxRoute: 'product' 是哪里维护的?
![](https://img.haomeiwen.com/i2085791/f93dd515d9e3ed70.png)
这个 serialize 方法被调用时,貌似已经解析出来了?
![](https://img.haomeiwen.com/i2085791/6fb1187b0168cd90.png)
cmsRequired 的赋值逻辑:
![](https://img.haomeiwen.com/i2085791/32cf2909a7d1c321.png)
还是没有找到我们要找的地方。
![](https://img.haomeiwen.com/i2085791/2c0b570582ccd83f.png)
这个 serializer 只是我们实现的一个 hook:
![](https://img.haomeiwen.com/i2085791/4f10b6a1cbde4393.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)
网友评论