当 URL 的查询参数发生更改时，如何调度 NGRX 操作？

Question

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

1. 我可以将 ngrx @Effect 绑定到 Angular-router“navigationend”Observable 并检查 URL 是否匹配“/documents”。效果将调度加载文档操作

2. 我可以将 ngrx @Effect 绑定到 ngrx/router-store 生成的 ROUTER_NAVIGATION 操作并执行操作。这里的问题是 ROUTER_NAVIGATION 不能保证用户真正到达预期的页面（例如他们可能被路由防护阻止），

3. 我可以在“文档”路径的 canActivate() 保护中分派操作 - 也许其他问题隐藏在这里（编辑：测试了这个，它不起作用，因为 canActivate 只被调用一次。当 URL 参数更改时，它不会再次被调用。 ）
4. 有更好的办法吗？

角度 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对于所有这些都有解决方案。

版本 4.1.1 文档 <-- 编辑：这些文档现已过时