SAP 电商云 Spartacus 产品明细页面的 pageContext 如何获取的？

调试入口：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 CustomSerializerimplements 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的原创文章，尽在：“汪子熙”:

SAP 电商云 Spartacus 产品明细页面的 pageContext 如何获取的？相关推荐

SAP 电商云 Spartacus 产品明细页面的 canActivate 执行逻辑 - isUrlProtected
调试入口:cms-page.guard.ts 的 canActivat 方法: 输入参数是已经成功匹配了的产品明细页面路由: 判断这个 url 片段是否属于被保护对象: 默认配置为 false: 因此 ...
SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的
当访问如下 url 时, http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI 我们能看到如 ...
为什么 SAP 电商云 Spartacus 产品明细页面的自定义 matcher 会重复被调用
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI 为什么打开一个 product 明细页 ...
SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
如下图所示,为了减少 SAP 电商云 Spartacus 客户实施时不必要的配置,Spartacus 将不少页面的路由路径的默认配置,定义在如下的 default-routing-config.ts ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...

SAP 电商云 Spartacus 产品明细页面的 pageContext 如何获取的？

SAP 电商云 Spartacus 产品明细页面的 pageContext 如何获取的？相关推荐

最新文章

热门文章