在不同的Angular組件中重復使用表單數據？

Question

在我的Angular應用程序中，我有一堆輸入表單數據的不同對話框模式。 某些數據組以許多不同的形式重復（例如：帶有姓名，電子郵件，地址等的個人信息）。 我想將表單部分分成一個組件，然后在不同的模式組件中重用它。

標記部分很簡單，但是我不確定如何將數據傳遞到其父組件。 取決於將表單數據組件添加到哪個模式組件，提交按鈕上會發生不同的事情。

我正在尋找有關如何實現此目標的教程或某種高級解釋

Answer 1

關於“如何將在form.component.html中輸入的數據傳遞給some-component.html”的問題

如果您的form.component.html是父組件some-component.ts的子組件的模板，那么您可以輕松地遵循官方文檔（ 此處是鏈接 ）。 也就是說 ：

1. 對於子組件：

   • 您需要一個EventEmitter屬性，該屬性被標記為輸出（發出的數據類型可能不是布爾值）

      @Output() customEvent = new EventEmitter<boolean>(); 

   • 發出事件的某種方法

      myMethod() { this.customEvent.emit(someData); } 

2. 設置子組件后，讓我們看一下其父組件：

   • 您需要在父模板中有一個屬性，該屬性與@Output（）屬性的名稱相對應（此處，我們給屬性命名為“ customEvent”）

      <child-component (customEvent)="handleEvent($event)"></child-component> 

   • 然后，您可以在觸發事件后進行處理

      handleEvent(data) { // do something } 

嘗試查看此鏈接以獲取完整的示例： http : //learnangular2.com/outputs/