標題：@ngrx/router-store 的作用

官網(wǎng)

用于將 Angular Router 與 Store 連接的綁定。 在每個路由器導航周期中，會分派多個動作，讓您可以監(jiān)聽路由器狀態(tài)的變化。 然后，您可以從路由器的狀態(tài)中選擇數(shù)據(jù)，為您的應用程序提供附加信息。

安裝：

npm install @ngrx/router-store --save

之后，在 package.json 會出現(xiàn)一個依賴：

action

Router Store 提供了五個按特定順序調(diào)度的導航操作。 Router Store 提供的 routerReducer 使用 actions 給出的最新路由器狀態(tài)更新其狀態(tài)。 默認情況下，我們建議使用我們提供的 creator function.

routerRequestAction

在每次導航開始時，路由器將調(diào)度 ROUTER_REQUEST action.Spartacus 沒有用到這個 action.

routerNavigationAction

在導航期間，在任何 guard 或 resolvers 運行之前，路由器將調(diào)度 ROUTER_NAVIGATION 操作。

Spartacus 里使用到了這個 action：

navigation target：

routerNavigatedAction

成功導航后，路由器將調(diào)度 ROUTER_NAVIGATED action.

事件 ROUTER_NAVIGATION 觸發(fā)時，home page 的 page guard 和 resolver 還沒有執(zhí)行：

事件 ROUTER_NAVIGATED 發(fā)生時，跳轉(zhuǎn)已經(jīng)成功完成了。所以 nextState 為 undefined.

因此，判斷當前是否處于 navigating 即正在導航，只需要從 store 里，檢查 nextState 是否為空就行了。

發(fā)生的時序如下：

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的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的@ngrx/router-store 在 SAP 电商云 Spartacus UI 开发中的作用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。