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(); 
}