当访问如下 url 时，
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI

我们能看到如下的 OCC API 调用：

https://<host>:9002/occ/v2/powertools-spa/cms/pages?pageType=ProductPage&code=3755211&lang=en&curr=USD
![](https://img-blog.csdnimg.cn/img_convert/f0140ff1c53c183d741ad70b36b670d0.png)

这个 OCC API 是 cms-page.connector.ts 触发的。Connector 肯定是 effect 调用的，调用时，pageContext 已经解析完毕了。这个 type 为 ProductPage 是如何解析的？

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

加上打印语句：
![](https://img-blog.csdnimg.cn/img_convert/a8677f97c27fe4cfa3b9b9ef27ae6083.png)

果然是被 page effect 调用的：
![](https://img-blog.csdnimg.cn/img_convert/b07165c7e76f8c4e4383d5da4990c3a1.png)

检查是谁抛出的 CmsActions.LoadCmsPageData 即可。
在 page action 的构造函数里打断点，就知道谁去 dispatch 的这个 action 了：
![](https://img-blog.csdnimg.cn/img_convert/f6200a3725c1ba6bc09f56086e18f030.png)

看样子我们要在 cms.service.ts 的 hasPage 方法里继续设置断点了：

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

这里找到了源头：我们之前的文章已经介绍过，把 url 粘贴到浏览器地址栏之后，会触发 Angular 路由器框架 Router 的检测逻辑，如果 url 的片段确实是 RouterModule.forChild 里传入的 routes 数组的片段时，说明路由匹配成功，此时需要执行该路由的 canActivate 钩子，只有钩子返回 true，才能真正激活这个路由，加载 route 数据结构里维护的 Component 实例。

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

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

上图解释了本文标题的疑问。

ITPub博客

SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的

最新文章