Angular 角度2型设计

我对web开发和Angular 2都是新手，正在寻找关于如何设计表单的一般建议。要求如下

输入和结果有一个单独的页面

当按下“输入”页面上的“提交”按钮时，将进行API调用，调用结果将显示在“结果”页面上

在结果页面上应该有一个返回按钮，通过该按钮可以导航到输入页面（输入设置为提交前的值）。理想情况下，用户也可以使用浏览器的后退按钮，按下浏览器刷新按钮将显示相同的结果

应开发哪些组件（例如父组件、输入组件和结果组件？），它们应如何交互，以及应使用哪些URL/路由来满足要求。对我来说，一个主要的难点是背部功能（要求3）

欢迎来到Angular2+

因为您有一个表单和一个结果页面，所以我将使用两个组件

表单组件应包含以下内容：

this.myAwesomeService.myAPICall(this.formData)
            .subscribe(data => {
                // You will arrive here once the API call has returned something
                // We then redirect to your second page 
                this.router.navigateByUrl('/my/secondpage/url');
            }, error => {
                // Error handling here
            });

• HTML模板和表单（请参阅Angular 2中关于模型驱动表单的教程，因为我发现它们非常有用）
• 您的组件类将包含在单击submit按钮时调用的方法，它将检索表单中输入的值，并将它们传递给服务中的方法，该方法将对API执行http请求

所述方法应类似于以下内容：

this.myAwesomeService.myAPICall(this.formData)
            .subscribe(data => {
                // You will arrive here once the API call has returned something
                // We then redirect to your second page 
                this.router.navigateByUrl('/my/secondpage/url');
            }, error => {
                // Error handling here
            });

为了在下一页中检索数据，我建议创建一个包含所有所需数据的服务

A“只是一个javascript函数及其相关属性和方法，可以（通过依赖项注入）包含在Angular 2组件中。它们允许您为可在这些组件中使用的特定任务开发代码。”

因此，在最终页面组件中，您可以执行以下操作：

constructor(private location: Location,                                
            private myAwesomeService: MyService) {
   console.log(myAwesomeService.getData());
}

最后，您可能已经注意到第二个组件的构造函数中的

private location:location

注入，它可以用来像这样“返回”：

doBack() {
    this.location.back();
}

---

为了实现“返回”功能，我将创建一个服务来存储输入值和结果。我建议查看官方的Angular教程：本教程涵盖您的需求。