除錯入口：this.routingService.getNextPageContext()

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

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

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

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

@Injectable()
export class CustomSerializer
  implements fromNgrxRouter.RouterStateSerializer<ActivatedRouterStateSnapshot>

我們自己實現了 Angular router 框架的一個介面：

fromNgrxRouter.RouterStateSerializer

這裡硬編碼了，只要 routerState 裡的引數，出現了 productCode，我們就認為這是一個 Product page：

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

然後我們的 reducer 被呼叫：

這些都是之前 serializer populate 出的資料：

這裡我們把 navigation target 寫入 in-memory state, 這樣接下來的 selector，就能從 state 裡讀取出 product 明細頁面的 page context 了：

疑問至此解開。

更多Jerry的原創文章，盡在："汪子熙":