Route Params with NgRx Store

学习使用NgRx访问路由参数@ngrx / router-store．

用例

虽然我在很多应用中使用了NgRx存储模块来实现Angular中受重定向影响的状态管理，但我经常找不到使用@ngrx / router-store包中。

该项目的目的@ngrx / router-store套餐是提供:

绑定来连接Angular路由器和Store。

我最近发现的使用这个包的具体用例是:

• 定义良好的路由参数、查询参数和分片。
• 应用状态来源于路由。
• 应用程序状态持久化到路由中。

选择器

NgRx包括访问当前路由URL的选择器，它的路由参数，查询参数和片段。还有一些工厂选择器可以通过名称访问特定的参数。

我们通过getSelectors ()功能:

出口常量routerState＝createFeatureSelector<RouterState,RouterReducerState<任何>>（“路由器”）；出口常量｛selectCurrentRoute,//选择当前路由selectFragment,//选择当前路由片段selectQueryParams,//选择当前路由查询参数selectQueryParam,//选择查询参数的工厂函数selectRouteParams,//选择当前路由参数selectRouteParam,//选择路由参数的工厂函数selectRouteData,//选择当前路由数据selectUrl//选择当前url｝＝getSelectors（routerState）；

使用效果

虽然我们可以使用选择器来访问组件中的路由参数，但我并不觉得这比简单地注入ActivatedRoute类。相反，我发现使用路由参数选择器非常当通过效果对导航事件作出反应时很有帮助。

让我们来看看一个简单的效果，在模式中打开用户的帐户信息#帐户片段在URL中:

openAccountModal美元＝createEffect（（）＝>这．美元的行为．管（减低（routerNavigatedAction）,withLatestFrom（这．商店．管（选择（selectRouteFragment）））,过滤器（（［,片段］）＝>片段& &片段＝＝＝“账户”）,地图（（）＝>openModal（｛配置：新AccountModal（）｝））））；

以上代码的关键要点是:

• 我们使用的是NgRx 8版createEffect ()函数创建效果。
• 使用withLatestFrom ()的RxJS操作符，我们可以从商店访问选定的路由片段selectRouteFragment操作符。
• 我们filter ()对于值为字符串的片段账户．
• 然后,我们map ()到openModal ()被分派以打开AccountModal．

这种方法的一些优点:

• 我可以有“全局”效果，对导航事件和路由参数、查询参数和片段值做出反应。
• 我不想把这个逻辑放在组件中。
• 如果没有NgRx，我可以将它连接到一个打开模态的服务中，然而，我发现当使用NgRx时，这种方法非常干净。

访问所有参数

虽然我发现NgRx选择器的当前实现在我的用例中已经完成了，但你可能会发现选择器只提供对最后一个子路由参数的访问本期报道．

我们可以很容易地编写一些辅助函数来创建Map ()在所有路由参数中:

私人getAllRouteParameters（快照：SerializedRouterStateSnapshot）｛让路线＝快照．根；让参数个数＝新地图（对象．键（路线．参数个数）．地图（关键＝>［关键,路线．参数个数［关键］］））；而（路线．写上。）｛路线＝路线．写上。；对象．键（路线．参数个数）．forEach（关键＝>参数个数．集（关键,路线．参数个数［关键］））；｝返回参数个数；｝私人getAllQueryParameters（快照：SerializedRouterStateSnapshot）｛让路线＝快照．根；让参数个数＝新地图（对象．键（路线．queryParams）．地图（关键＝>［关键,路线．queryParams［关键］］））；而（路线．写上。）｛路线＝路线．写上。；对象．键（路线．queryParams）．forEach（关键＝>参数个数．集（关键,路线．queryParams［关键］））；｝返回参数个数；｝

然后，我们可以通过提供routeState快照:

测试美元＝createEffect（（）＝>这．美元的行为．管（减低（routerNavigatedAction）,利用（（｛有效载荷｝）＝>｛控制台．日志（这．getAllRouteParameters（有效载荷．routerState））；控制台．日志（这．getAllQueryParameters（有效载荷．routerState））；｝））,｛调度：假｝）；

在上面的效果中，我注销了所有路由和查询参数。为了简洁起见，此效果只是一个测试，并不分派后续操作。

结论

最后，我发现@ngrx / router-store不过，如果您发现您需要一种方法来访问所有路由参数和查询参数，我已经为您提供了一些有用的方法，您可以在您的效果类中使用。