Question

当URL的查询参数更改时，您将如何调度ngrx操作？我有一个带参数的URL（例如http://myapp.my/documents?startdate=2015-04-04&enddate=2015-06-06），当用户点击后退（前进）浏览器按钮时，angular将导航到可能具有不同搜索参数的上一个（下一个）URL。所以我需要发送一个“加载文档”动作来从DB加载相应的文档。我可以看到多种方法。

我可以将ngrx @Effect绑定到angular-router “navigationend”可观察并检查URL是否匹配 “/文件”。效果会调度加载文档操作
我可以将ngrx @Effect绑定到由ngrx / router-store生成的ROUTER_NAVIGATION动作并执行操作。这里的问题是ROUTER_NAVIGATION并不能保证用户真正到达目标页面（例如他们可能被路线保护阻止），
我可以在“文档”路径的canActivate（）保护中调度动作 - 也许其他问题隐藏在这里（编辑：测试过这个并且它不起作用，因为canActivate只被调用一次。当URL没有被调用时参数改变。）
一些更好的方法？

Angular 5，ngrx 4。

Answer 1

您应该使用@ngrx/router-store将当前路线添加到商店，然后您可以订阅当前路线参数

this.store.select('routerReducer', 'state', 'params').subscribe(params => {
  // do stuff
})

select应自动为您重复params，确保您只在路线参数更改时发送操作。如果合适，您也可以修改此项以使用.pipe()。或者制作一个@Effect()来监视路由器并做一些事情。 @ngrx/router-store为所有这些提供了解决方案。

Current (version 4.1.1) docs

Answer 2

使用以下代码：

this.route.params.subscribe(param: ParamMap => {
  // dispatched your action to fetch data
  this.store.dispatch(new YourAction.YourActionMethod());
  // When your store will update then subscribe will fired
  this.store.select(reducers.YourReducer).subscribe((data) => {
    if (data) {
      // use your data here
    }
  });
});

希望它会有所帮助

如何在URL的查询参数更改时调度NGRX操作？

2 个答案: