在不同的Angular组件中重用表单数据？

Question

在我的Angular应用程序中，我有一堆不同的对话框模式，其中输入了表单数据。一些数据组以许多不同的形式重复（例如：具有姓名，电子邮件，地址等的人员信息）。我想将表单部分分成一个组件，然后在不同的模态组件中重用它。

标记部分很简单，但我不确定如何将数据传递给其父组件。提交按钮会发生不同的事情，具体取决于表单数据组件将添加到哪个模态组件。

我正在寻找一个教程或某种高级别的解释，说明如何实现这个目标

Answer 1

关于＆＃34;如何将在form.component.html中输入的数据传递给some-component.html＆＃34;

的问题

如果 form.component.html 是父组件 some-component.ts 的子组件的模板，则可以轻松按照官方文档（{ {3}}）。也就是说：

1. 对于子组件：

   • 您需要一个标记为输出的EventEmitter属性（发出的数据类型可能不是布尔值）

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

   • 发出事件的某种方法

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

2. 设置子组件后，让我们查看其父组件：

   • 您的父模板中需要一个属性，该属性对应于@Output（）属性的名称（此处，我们将名称＆＃34; customEvent＆＃34;与我们的属性相对应）

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

   • 然后，您可以在触发时处理事件

     handleEvent(data) {
       // do something
     }
     

尝试查看此链接以获取完整示例：link here