题目：@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 的原创文章，尽在：” 汪子熙 ”: