共计 1004 个字符,预计需要花费 3 分钟才能阅读完成。
题目:@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 的原创文章,尽在:” 汪子熙 ”: