除錯入口：this.routingService.getNextPageContext()
![](https://img-blog.csdnimg.cn/img_convert/7ff7e640eefcaf16d9bed8d0b4952579.png)

這個 page context 直接從 store 裡讀取的，靠除錯 selector 是拿不到的。

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

我們以前學習過，當 Angular router 框架成功將瀏覽器位址列的 url，匹配到開發人員用 RouterModule.forChild 傳入的 routes 陣列時，會丟擲 RoutesRecognized 事件，如下圖所示：

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

```typescript
if (event instanceof RoutesRecognized) {
                routesRecognized = event;
                if (!dispatchNavLate && this.trigger !== RouterTrigger.STORE) {
                    this.dispatchRouterNavigation(event);
                }
```

Angular router 框架這裡提供了一個 hook，可以允許應用開發人員修改下一個 router state，即 nextRouterState 變數：

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

```typescript
@Injectable()
export class CustomSerializer
  implements fromNgrxRouter.RouterStateSerializer<activatedrouterstatesnapshot>
```
我們自己實現了 Angular router 框架的一個介面：

fromNgrxRouter.RouterStateSerializer

這裡硬編碼了，只要 routerState 裡的引數，出現了 productCode，我們就認為這是一個 Product page：
![](https://img-blog.csdnimg.cn/img_convert/03dbd4b44f7b280448e78a5b940a3263.png)

```typescript
if (params['productCode']) {
        context = { id: params['productCode'], type: PageType.PRODUCT_PAGE };
      } 
```

然後我們的 reducer 被呼叫：

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

這些都是之前 serializer populate 出的資料：
![](https://img-blog.csdnimg.cn/img_convert/292426769b6313dbe58aa55b422e8533.png)

這裡我們把 navigation target 寫入 in-memory state, 這樣接下來的 selector，就能從 state 裡讀取出 product 明細頁面的 page context 了：
![](https://img-blog.csdnimg.cn/img_convert/4224c8a9b444e7c824ee7dae1e172f99.png)

![](https://img-blog.csdnimg.cn/img_convert/f37696aa6c67a0fc5c3e4a829c4aafca.png)
疑問至此解開。</activatedrouterstatesnapshot>

SAP 電商雲 Spartacus 產品明細頁面的 pageContext 如何獲取的？

相關文章