在 Angular 2 中使用 http 调用进行路由

Question

我正在寻找在 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的部分业务逻辑，这对于组件封装并不是很好。

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

感谢您的帮助。

Answer 1

假设表单是独立的，我会将所有 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？，告诉用户稍后再试...

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

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