Javascript 在父级中单击按钮时如何将数据从子级传递到父级

我是新来的。我有一个大表格。我想把它模块化。这就是为什么我创建了多个较小的子组件以及我在主父组件中使用的所有组件选择器。我在

parent

component中有

save

按钮，单击save按钮，表单（子组件）的所有数据都应发送给api调用

我知道如何使用

@Output

将数据从子级发送到父级，但我只知道，当我单击子组件中的某个按钮将数据从子级发送到父级时， 但就我而言，我的子组件中没有任何按钮。那么，有没有有效的方法来实现同样的目标呢？或者我不应该使用这种方法？或者任何一个在stackblitz中有工作的例子

---

提前感谢

如果您作为

@Input

传递一个对象（这是一个变量，其值是一个对象，而不是字符串或数字），您不必担心使用@Output，否则您需要制作“某物”来获取子对象的值。简单的方法是在您的孩子中使用模板引用。所以你有，例如

<child-one #childOne ...></child-one>
<child-two #childTwo ...></child-two>
<child-three #childThree ...></child-three>
<button (click)="submit(childOne,childTwo,childThree)">submit</button>

submit(childOne:any,childTwo:any,childThree:any){
   //if, e.g. you has a variable in child-one, child-two and child-three called data you can use
   this.data={dataOne:childOne.data,dataTwo:childTwo.data,dataThree:childThree.data}
   //remember that you can "reach" all the variables public in your children 
   // as, childOne.name_of_variable
}

提交
提交（儿童一号：任意，儿童二号：任意，儿童三号：任意）{
//例如，如果在子1、子2和子3中有一个变量称为数据，则可以使用
this.data={dataOne:childOne.data，dataTwo:childTwo.data，dataThree:childTwo.data}
//记住，你可以“接触”你孩子的所有公共变量
//as，childOne.name_变量的_
}

---

其他配置，请提供更多数据：）

检查这里@Nicolas我正在使用模板驱动form@Nicolas是否有相同的工作示例？在应用程序中添加最少的复制，这样将更有助于理解和帮助您#childOne是@Input的变量名？因为当我传递它时，在子组件中我得到了错误的数据，点击按钮也得到了错误的数据。请提供两种不同的方法：#childOne是一个模板引用，当您编写（单击）=“提交（childOne）”时，在函数提交中，您在变量“childOne”中有childOne组件，您的组件的任何“公共变量”（以及在angular by defect中，所有变量和函数都是公共的）都可以“达到”。另一种方法是在输入中传递对象。在这个stackblitz中，你有两个选择：你能检查你的聊天框吗？我急需你的帮助