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

举报
Jerry Wang 发表于 2022/08/31 15:46:47 2022/08/31
【摘要】 调试入口:this.routingService.getNextPageContext()这个 page context 直接从 store 里读取的,靠调试 selector 是拿不到的。我们以前学习过,当 Angular router 框架成功将浏览器地址栏的 url,匹配到开发人员用 RouterModule.forChild 传入的 routes 数组时,会抛出 RoutesReco...

调试入口: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 了:


疑问至此解开。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。