Angular 5-使用NGRX存储的路由器状态和表单状态同步

Question

情况

想象一个简单的应用程序，其中用户具有一个搜索表单，并且一些结果显示在同一屏幕上。

通常的做法是提供在URL中反映搜索条件的可能性，以便用户能够复制和粘贴，来回移动等。

挑战

为了能够提供上述可能性，需要以某种方式使路由器状态与表单状态同步。

• 这意味着如果粘贴了URL并加载了应用程序，则必须将路由器状态的参数设置为表单的字段，并立即触发搜索以显示结果。
• 这也意味着，如果提交表单，则必须更新参数，并且必须显示搜索结果（请记住：我们在同一页面上同时拥有-表单和结果）
• 在这里，还必须注意无休止的递归。

---

另外，一个ngrx-store用于反映应用程序状态并消耗组件中的状态更改。

题

我不清楚如何打领带

• 路由器
• 表格
• 商店

一起。

导航发生后是否应该调度搜索事件，并且表单提交只是触发导航事件？ 表单是否应该使用存储状态更新并反映这些状态？ 不幸的是，一般概念对我来说不是很清楚。

---

那么，有没有我没有看到的建议，经验和最佳实践？ 已经谢谢你了！

Answer 1

如果必须实施此方案（我不建议这样做，我建议您有一个搜索组件和一个结果组件，但这是您的要求），我会怎么做：

• 创建一个URL解析服务，该服务将注入到所需的组件中
• 在初始化时，解析URL
• 触发行为主体以传播结果
• 在组件中，订阅主题
• 在构造函数中创建反应形式
• 在订阅中，一旦解析了URL，就设置表单的值。 如果尚未创建表单，则创建它并设置值
• 聆听表单值的更改。 每次表单更改时，URL都会被重写， 矩阵样式
• 每次表单值更改时都会触发搜索事件（可能会很麻烦，也许您应该对搜索进行反跳操作）

这符合您的所有要求：

• 在URL解析或表单值更改时启动搜索
• 每次表单值更改时，URL都会更新
• 没有递归

另外，我不知道您为什么需要这家商店，我曾经用过它，没有它我会感觉很好。 但是，如果需要，您可以自行插入！