Angular 2 Form Design

Question

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

1. 有一个输入和结果的单独页面。
2. 当输入页面上的提交按钮被按下时，将进行API调用，并在结果页面上显示调用结果。
3. 在结果页面上应该有一个后退按钮，用户可以导航到输入页面（输入设置为提交前的值）。理想情况下，人们也可以使用浏览器的后退按钮来实现这一目标，并且按下浏览器刷新按钮将呈现相同的结果。

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

Answer 1

欢迎Angular2 +，

当你有一个表单和结果页面，我会去两种成分组成的基础上。

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

• 与表单您的HTML模板（请参阅this教程模型驱动形式角2，因为我觉得他们非常有用）
• 你的组件类将包含当您的提交按钮被点击时调用的方法，它将检索表单中输入的值并将它们传递给服务中的一个方法，该方法将对您的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 service“只是一个javascript函数及其相关的属性和方法，可以通过依赖注入包含到Angular 2组件中，它们允许您为特定任务开发代码，组件。”。

因此在最终页面组件，你可以做这样的事情：

​​

最后要注意，你可能已经注意到private location: Location注射第二部件的构造，即可以用来像这样回去：

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