使用Angular 2

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（不是）去cA
2. cA - 显示表单，将数据发送到cP
3. cP - 通过ajax发送数据，转到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（;