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


    标题:@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的原创文章,尽在:"汪子熙":

  • 相关阅读:
    Android 多线程 打地鼠游戏
    Android 线程那些事儿
    Android 服务入门
    Android+Handler+Thread 那些事儿
    Android 数据库的线程合作
    Android 数据库中的数据给到ListView
    git 修改管理
    import com.sun.image.codec.jpeg.JPEGCodec不通过 找不到包(转载)
    VC++中开发汇编语言(转)
    C struct结构体内存对齐问题
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/15493276.html
Copyright © 2020-2023  润新知