角5-路由器状态&基于NGRX存储的表单状态同步

Question

情况

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

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

挑战

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

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

此外，ngrx-store还用于反映应用程序状态和使用组件中的状态更改。

问题

我不清楚该怎么打领带

• 路由器
• 表单
• 商店

在一起。

是否应该在导航发生后分派搜索事件，而表单提交只是触发导航事件？表单应该使用存储状态更新并反映这些状态吗？不幸的是，总的概念对我来说并不十分清楚。

那么，有没有我没有看到的建议、经验和最佳做法？已经谢谢了！

Answer 1

如果我必须实现这个场景，我会做什么(我不建议这样做，我建议使用搜索组件和结果组件，但这就是您的调用)：

• 创建一个url解析服务，我将其插入到想要的组件中。
• 在init上，解析URL
• 触发要传播结果的行为。
• 在组件中，订阅主题
• 在构造函数中创建反应性表单。
• 在订阅中，在解析url后设置窗体的值。如果尚未创建表单，则创建它并设置值
• 侦听表单值的更改。每次表单更改时，都会重写url，matrix style
• 在每个表单值更改时触发一个搜索事件(这可能很重，也许您应该取消搜索)

这符合您的所有要求：

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

而且，我也不知道你为什么需要那家商店，我从来没有用过它，没有它我感觉很好。但是如果你想要的话，就由你来插进去吧！