使用 routing.selector.ts 里的 isNavigating:

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

设计原理：Spartacus route reducer 里针对 ROUTER_NAVIGATION 和 ROUTER_NAVIGATED 进行状态迁移：

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

当接收到 ROUTER_NAVIGATION(跳转正在进行) 事件时，将状态的 nextState 字段设置成 action payload：

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

当接收到 ROUTER_NAVIGATED(跳转已经完成) 事件时，将状态的 nextState 字段设置成 undefined：
![](https://img-blog.csdnimg.cn/img_convert/124e50acb9c9ba5ef7e7dc7261ed310a.png)

回到本文开头的 API，如果 nextState 不为空，说明正在 navigating.

selector 就是纯函数，能够返回 state 的某一个切片的数据。

只有通过 createSelector 创建的 selector，才具有记忆功能(memoized)，即对于相同的输入，一定会返回相同的输出。
![](https://img-blog.csdnimg.cn/img_convert/d365dd79c8be8aa372c8f0f389fc3994.png)

为什么 pageMetaService 会触发到 Router State 的 selector？

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

看看 this.meta$ 的数据源：

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

meta$ 来自 this.cms.getCurrentPage:
![](https://img-blog.csdnimg.cn/img_convert/af65e5759e34a1fb1543ef11ae03b10b.png)

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

从全局 store 里调用 RoutingSelector 的 getPageContext 方法：

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

最后 selector 被调用：
![](https://img-blog.csdnimg.cn/img_convert/fe8e5e199a554fece211b7ce5f2b48ac.png)

ITPub博客

如何检测 SAP 电商云 Spartacus UI 当前正处于导航状态

最新文章