使用NgRx Store路由参数
学习使用NgRx访问路由参数@ngrx / router-store。
用例
虽然我在很多应用中都使用过NgRx store模块来进行Angular中受redux启发的状态管理，但我经常找不到一个使用这个模块的用例@ngrx / router-store包中。
的目的@ngrx / router-store包是提供:
绑定来连接Angular路由器和Store。
我最近发现使用这个包的一个具体用例是:
- 定义良好的路由参数、查询参数和片段。
- 应用程序状态来源于route。
- 应用程序状态持久化到路由中。
选择器
NgRx包括了访问当前路由URL、路由参数、查询参数和fragment的选择器。还有按名称访问特定参数的工厂选择器。
我们通过getSelectors ()功能:
出口常量routerState=createFeatureSelector<RouterState,RouterReducerState<任何>>(“路由器”);出口常量{selectCurrentRoute,//选择当前路由selectFragment,//选择当前的路由片段selectQueryParams,//选择当前路由查询参数selectQueryParam,//选择查询参数的工厂函数selectRouteParams,//选择当前的路由参数selectRouteParam,//选择路由参数的工厂函数selectRouteData,//选择当前路由数据selectUrl//选择当前的url}=getSelectors(routerState);使用效果
虽然我们可以使用选择器来访问组件中的路由参数，但我觉得这并不比简单地注入ActivatedRoute类。相反，我发现使用路由参数选择器非常在通过效果对导航事件做出反应时很有帮助。
让我们来看看一个简单的效果，它以模式打开用户的帐户信息#帐户fragment在URL中:
openAccountModal美元=createEffect(()= >这。美元的行为。管(减低(routerNavigatedAction),withLatestFrom(这。商店。管(选择(selectRouteFragment))),过滤器(((,片段])= >片段& &片段= = =“账户”),地图(()= >openModal({配置:新AccountModal()}))));以上代码的关键要点是:
- 我们使用的是NgRx 8版
createEffect ()函数创建一个效果。 - 使用
withLatestFrom ()函数，我们可以从存储中访问选定的路由片段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包对于我的用例来说已经足够了，但是，如果您发现需要一种方法来访问所有路由参数和查询参数，那么我为您提供了一些可以在您的effect类中使用的有用方法。