如果直接訪問如下 url：
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115

![](https://img-blog.csdnimg.cn/img_convert/3d64b5b54928b2bb959c6d871ec0e006.png)

頁面開啟後，沒有看到和 product 相關的執行邏輯：

![](https://img-blog.csdnimg.cn/img_convert/9c0bb5824697ec2c28fed2028a20d977.png)

![](https://img-blog.csdnimg.cn/img_convert/3e77f95877983de60e2047323389bc0d.png)

我們自定義的 ActivatedRouterStateSnapshot interface，和上圖 Chrome 偵錯程式裡列印的結構很像：

![](https://img-blog.csdnimg.cn/img_convert/9a12c84dd87a36740f56052f4f5bdec5.png)

先在這個 reducer 裡設定斷點：
![](https://img-blog.csdnimg.cn/img_convert/06980e38b5d64361810f1ecd469aba24.png)

列印出了海量的日誌。我們先不管是誰觸發的這些 reducer 呼叫，先檢視和 product 相關的日誌：

![](https://img-blog.csdnimg.cn/img_convert/48b718fa14fabe98eb9e7bebb5736880.png)

很像這兩行：
![](https://img-blog.csdnimg.cn/img_convert/b681e658a6bb598451e8c0db4d50599f.png)

果然，這裡已經解析出 navigation target 了：
![](https://img-blog.csdnimg.cn/img_convert/24b9fcbf3d8e65ce4d7aac75bb099c56.png)

執行到這的時候，mavigation 的目標頁面已經被解析出來了：

![](https://img-blog.csdnimg.cn/img_convert/d95a17769b4e8f27b7604206ef5168c9.png)

![](https://img-blog.csdnimg.cn/img_convert/6b4a0d838b4fe3693a7ec4e2b1f36d7a.png)

選擇 cmsRequired 作為突破口。

在這個 serialize 方法裡設定斷點：

![](https://img-blog.csdnimg.cn/img_convert/a5ed85f1adb3e4eb6155753ed7f860da.png)

輸入引數僅僅包含了一個 url：
![](https://img-blog.csdnimg.cn/img_convert/6dc8a1c1b1613c88b92dbef593279263.png)

這個 cxRoute: 'product' 是哪裡維護的？

![](https://img-blog.csdnimg.cn/img_convert/ba5d0a06710b8309e419b640d3b535ec.png)

這個 serialize 方法被呼叫時，貌似已經解析出來了？
![](https://img-blog.csdnimg.cn/img_convert/b21b2096758f2d7ad581bcd26f54308f.png)

cmsRequired 的賦值邏輯：
![](https://img-blog.csdnimg.cn/img_convert/9864f63a86d0ced8586924f76e816ff2.png)

還是沒有找到我們要找的地方。

![](https://img-blog.csdnimg.cn/img_convert/cdf719c3a3755f751c1055e6153627a1.png)

這個 serializer 只是我們實現的一個 hook：
![](https://img-blog.csdnimg.cn/img_convert/4c88997cbab6309088a778e36a942cf0.png)

SAP 電商雲 Spartacus UI 實現的 ngrx-router-store.js 的 serializer

相關文章