0

我正在寻找在 Angular 2 中的组件之间进行路由的最佳方式。在我的应用程序中，我通过提交表单从一个页面转到另一个页面：

  • 页面 A 显示一个表单和一个提交按钮以进行下一步，
  • 用户在页面A表单中提交的数据用于使用ajax调用后端操作，
  • 页面 B 显示了 ajax 调用的结果和一个新的表单以进入下一步（页面 C）...

在每一步，后端都会返回一个错误，我们要么返回上一页，要么显示一个错误页面（致命错误）。

我看到两个简单的 ajax 调用选项：

  1. 组件A只显示表单并将输入参数转发给组件B。组件B运行ajax调用并显示结果。
  2. OR 组件 A 使用他拥有的输入参数运行 ajax 调用，并将结果转发给组件 B 进行显示。如果出现错误，组件 A 会重新显示自身。

选项 1 的问题是，如果出现错误，后端将响应页面 A 业务模型和错误消息。组件 B 必须将结果转发给组件 A，以便重新显示页面 A。

选项 2 的问题是组件 A 具有组件 B 的部分业务逻辑，这对于组件封装并不是很好。

我的问题是：是否有一个好的设计模式可以做到这一点？例如，我应该使用中间组件吗？

感谢您的帮助。

4

1 回答 1

2

假设表单是独立的，我会将所有 ajax 调用移动到父组件并将所有数据也保留在那里。所以工作流程会是这样的：

  1. cP(arent) 转到 cA

  2. cA - 显示表格，发送数据给 cP

  3. cP - 通过 ajax 发送 A 数据，转到 cB

  4. cB - 显示表格，发送数据给 cP

  5. cP -（A 数据出错），通过 ajax 发送 B 数据，转到 cC

  6. cC - 显示表单，通知用户表单 A 有错误，让用户现在返回，或完成步骤 C 并稍后执行 A，将数据发送到 cP

  7. cP -（B 数据出现致命错误），不要通过 ajax 发送 C 数据，将数据保存到 localStorage？，告诉用户稍后再试...

    ...ETC。它更加用户友好，您可以根据需要显示页面/表单。

如果表单相互依赖，我仍然会将 ajax 和数据保留在父级中，并在服务器响应时显示它们。但我建议你将它们设计成独立的，或者你可以在用户等待时播放一些电梯音乐（;

于 2016-01-26T10:41:48.320 回答