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

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

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


官网


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


安装:


npm install @ngrx/router-store --save


之后,在 package.json 会出现一个依赖:

image.png



action

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


routerRequestAction

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


routerNavigationAction

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


Spartacus 里使用到了这个 action:

image.pngimage.png




navigation target:


image.png

routerNavigatedAction

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


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

image.png


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

image.png



因此,判断当前是否处于 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


相关文章
|
1月前
|
Linux 开发工具 开发者
关于 SAP HANA 开发那些事
关于 SAP HANA 开发那些事
24 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0
|
1月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
3月前
|
供应链 BI 项目管理
SAP 业务顾问和开发顾问的各自职责
SAP 业务顾问和开发顾问的各自职责
49 0
|
22天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
22天前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
10 0
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
2月前
|
JSON 数据格式
SAP UI5 Class sap.ui.model.Context 的作用介绍
SAP UI5 Class sap.ui.model.Context 的作用介绍
30 0
|
2月前
|
中间件
SAP UI5 Tooling 实战:动手创建自己的 Custom UI5 Server Middleware 试读版
SAP UI5 Tooling 实战:动手创建自己的 Custom UI5 Server Middleware 试读版
18 0
SAP UI5 Tooling 实战:动手创建自己的 Custom UI5 Server Middleware 试读版
|
3月前
|
存储 缓存 前端开发
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
20 0

热门文章

最新文章