標題：@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的原創文章，盡在："汪子熙":