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

[官網](https://ngrx.io/guide/router-store)

用於將 Angular Router 與 Store 連線的繫結。 在每個路由器導航週期中，會分派多個動作，讓您可以監聽路由器狀態的變化。 然後，您可以從路由器的狀態中選擇資料，為您的應用程式提供附加資訊。

安裝：

> npm install @ngrx/router-store --save

之後，在 package.json 會出現一個依賴：

![](https://img-blog.csdnimg.cn/img_convert/b811aaa809b2822a82dfea74546988e4.png)

# action

Router Store 提供了五個按特定順序排程的導航操作。 Router Store 提供的 routerReducer 使用 actions 給出的最新路由器狀態更新其狀態。 預設情況下，我們建議使用我們提供的 creator function.

## routerRequestAction

在每次導航開始時，路由器將排程 ROUTER_REQUEST action.Spartacus 沒有用到這個 action.

## routerNavigationAction

在導航期間，在任何 guard 或 resolvers 執行之前，路由器將排程 ROUTER_NAVIGATION 操作。

Spartacus 裡使用到了這個 action：
![](https://img-blog.csdnimg.cn/img_convert/2eb1c3d2a8001d21e62cdaa813958000.png)

![](https://img-blog.csdnimg.cn/img_convert/df76aea02278f481194876857896c3a5.png)

navigation target：
![](https://img-blog.csdnimg.cn/img_convert/0906eec387ba492ddc10109aefcdbf8d.png)

# routerNavigatedAction

成功導航後，路由器將排程 ROUTER_NAVIGATED action.

事件 ROUTER_NAVIGATION 觸發時，home page 的 page guard 和 resolver 還沒有執行：
![](https://img-blog.csdnimg.cn/img_convert/c489b615f655fdc2f822190cbee951e7.png)

事件 ROUTER_NAVIGATED 發生時，跳轉已經成功完成了。所以 nextState 為 undefined.

![](https://img-blog.csdnimg.cn/img_convert/c8137b6b618671dcd914f2b252259b97.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

@ngrx/router-store 在 SAP 電商雲 Spartacus UI 開發中的作用

相關文章