使用NGRX商店路由参数

使用ngrx学习访问路由参数@ ngrx /路由器 - 商店。

用例

虽然我在许多应用中使用了NGRX商店模块，但在很多应用中，我常常找不到使用的用例@ ngrx /路由器 - 商店包裹。

的目的是@ ngrx /路由器 - 商店包是提供：

连接有角路由器的绑定与商店。

我最近发现使用此包的特定用例是应用程序：

• 明确定义的路由参数，查询参数和片段。
• 应用状态来自路由。
• 申请状态持续到路线中。

选择器

NGRX包括用于访问当前路由URL的选择器，它是路由参数，查询参数和片段。还有工厂选择器按名称访问特定参数。

我们通过该选择器通过getselectors（）功能：

出口const矫形器=CreateFeaturesElector<矫形器那Routereducerstate.<任何>>（'路由器'）;出口const{SelectCurrentRoute.那//选择当前路由选择惯用那//选择当前路由片段SelectQueryParams.那//选择当前路由查询参数SelectQueryParam.那//工厂函数选择查询参数selectrecteparams.那//选择当前路线参数selectrintearam.那//工厂函数选择路由参数selectroutedata.那//选择当前路由数据Selecturl.//选择当前的URL}=GetSelectors.（矫形器）;

使用效果

虽然我们可以使用选择器来访问组件中的路由参数，但与简单地注入时，我没有发现特别有帮助activatedRoute.班级。相反，我发现使用路线参数选择器非常通过效果反应导航事件时有用。

让我们来看看一个简单的效果，它在模态时打开用户的帐户信息＃帐户片段是URL：

OpenAccountModal $=createeffect.（（）=>这。行动$。管道（oftype.（resernavigationAction.）那FATHLATISTFROM.（这。店铺。管道（选择（SelectRoutefragment.）））那筛选（（[那分段]）=>分段&&分段===.'帐户'）那地图（（）=>OpenModal.（{配置：新的accountmodal.（）}））））;

上面的代码的关键外带是：

• 我们正在使用NGRX版本8CreateEffect（）功能创建效果。
• 使用withlattestfrom（）RXJS运算符我们可以使用商店访问所选路由片段SelectRoutefragment.操作员。
• 我们筛选（）对于其中值是字符串的片段帐户。
• 然后我们地图（）到了OpenModal（）被派遣的行动打开accountmodal.。

这种方法的一些优点：

• 我可以对导航事件和路由参数，查询参数和片段值作出反应的“全局”效果。
• 我不想将此逻辑放在组件中。
• 如果没有ngrx，我可以在打开模态的服务中加入这一点，但是，当使用ngrx时，我发现这种方法非常干净。

访问所有参数

虽然我发现当前的NGRX选择器的实现完成了我的用例，但您可能发现选择器只提供对最后一个儿童路线的参数的访问在这个问题上报告。

我们可以轻松地编写一些帮助函数来创建一个地图（）所有路由参数：

私人的GetAllRouteParameters.（快照：serializedrouterstatesnapshot.）{让路线=快照。根;让参数=新的地图（目的。钥匙（路线。参数）。地图（钥匙=>[钥匙那路线。参数[钥匙]]））;尽管（路线。第一个孩子）{路线=路线。第一个孩子;目的。钥匙（路线。参数）。Foreach.（钥匙=>参数。放（钥匙那路线。参数[钥匙]））;}返回参数;}私人的GetAllQueryParameters.（快照：serializedrouterstatesnapshot.）{让路线=快照。根;让参数=新的地图（目的。钥匙（路线。queryparams.）。地图（钥匙=>[钥匙那路线。queryparams.[钥匙]]））;尽管（路线。第一个孩子）{路线=路线。第一个孩子;目的。钥匙（路线。queryparams.）。Foreach.（钥匙=>参数。放（钥匙那路线。queryparams.[钥匙]））;}返回参数;}

然后我们可以通过提供这些帮助方法来实现效果rutiestate.快照：

测试$=createeffect.（（）=>这。行动$。管道（oftype.（resernavigationAction.）那轻敲（（{有效载荷}）=>{安慰。日志（这。GetAllRouteParameters.（有效载荷。矫形器））;安慰。日志（这。GetAllQueryParameters.（有效载荷。矫形器））;}））那{派遣：错误的}）;

在上面的效果中，我正在记录所有路由和查询参数。为了简洁起见，这种效果只是一个测试，并且不会发出后续行动。

结论

总之，我发现提供的选择器@ ngrx /路由器 - 商店但是，如果您发现您需要一种访问所有路由参数和查询参数的方法，请为您提供一些有用的方法，您可以在您的效果类中使用一些有用的方法。