布莱恩F爱
向来自波特兰的谷歌开发者专yobet英雄联盟家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
使用Ultimate Courses以正确的方式学习Angular

Route Params with NgRx Store

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

用例

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

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

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

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

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

选择器

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

我们通过getSelectors ()功能:

出口常量routerStatecreateFeatureSelector<RouterState,RouterReducerState<任何>>“路由器”出口常量selectCurrentRoute,//选择当前路由selectFragment,//选择当前路由片段selectQueryParams,//选择当前路由查询参数selectQueryParam,//选择查询参数的工厂函数selectRouteParams,//选择当前路由参数selectRouteParam,//选择路由参数的工厂函数selectRouteData,//选择当前路由数据selectUrl//选择当前urlgetSelectorsrouterState

使用效果

虽然我们可以使用选择器来访问组件中的路由参数,但我并不觉得这比简单地注入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关键路线写上。路线路线写上。对象路线queryParamsforEach关键=>参数个数关键,路线queryParams关键返回参数个数

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

测试美元createEffect=>美元的行为减低routerNavigatedAction,利用有效载荷=>控制台日志getAllRouteParameters有效载荷routerState控制台日志getAllQueryParameters有效载荷routerState,调度

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

结论

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

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。