标题：@ngrx/router-store 的作用

官网

用于将 Angular Router 与 Store 连接的绑定。在每个路由器导航周期中，会分派多个动作，让您可以监听路由器状态的变化。然后，您可以从路由器的状态中选择数据，为您的应用程序提供附加信息。

安装：

npm install @ngrx/router-store --save

之后，在 package.json 会出现一个依赖：

action

Router Store 提供了五个按特定顺序调度的导航操作。 Router Store 提供的 routerReducer 使用 actions 给出的最新路由器状态更新其状态。默认情况下，我们建议使用我们提供的 creator function.

routerRequestAction

在每次导航开始时，路由器将调度 ROUTER_REQUEST action.Spartacus 没有用到这个 action.

routerNavigationAction

在导航期间，在任何 guard 或 resolvers 运行之前，路由器将调度 ROUTER_NAVIGATION 操作。

Spartacus 里使用到了这个 action：

navigation target：

routerNavigatedAction

成功导航后，路由器将调度 ROUTER_NAVIGATED action.

事件 ROUTER_NAVIGATION 触发时，home page 的 page guard 和 resolver 还没有执行：

事件 ROUTER_NAVIGATED 发生时，跳转已经成功完成了。所以 nextState 为 undefined.

因此，判断当前是否处于 navigating 即正在导航，只需要从 store 里，检查 nextState 是否为空就行了。

发生的时序如下：

Success case

ROUTER_REQUEST
ROUTER_NAVIGATION
ROUTER_NAVIGATED

Error / Cancel case (with early Navigation Action Timing):

ROUTER_REQUEST
ROUTER_NAVIGATION
ROUTER_CANCEL / ROUTER_ERROR

Error / Cancel case (with late Navigation Action Timing):

ROUTER_REQUEST
ROUTER_CANCEL / ROUTER_ERROR

更多Jerry的原创文章，尽在：“汪子熙”:

@ngrx/router-store 在 SAP 电商云 Spartacus UI 开发中的作用相关推荐

SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应 ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
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 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...
SAP 电商云 Spartacus UI Quick Order 主页的实现
存货单位(英語:stock keeping unit,SKU/ˌɛsˌkeɪˈjuː/),也翻译为库存单元,是一個會計學名詞,定义为库存管理中的最小可用单元,例如纺织品中一个SKU通常表示规格.颜色. ...
SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
如下图所示,为了减少 SAP 电商云 Spartacus 客户实施时不必要的配置,Spartacus 将不少页面的路由路径的默认配置,定义在如下的 default-routing-config.ts ...

@ngrx/router-store 在 SAP 电商云 Spartacus UI 开发中的作用