如何将数据从子节点传递到父节点

Question

我是新人。我有一个大表格。我想让它模块化。这就是为什么我创建了多个较小的子组件和我在主父组件中使用的所有组件选择器。我在parent组件中有save按钮，在点击保存按钮时，表单(子组件)的所有数据都应该发送给api调用。

我知道如何使用@Output从子组件发出数据到父组件，但我只知道，当我单击子组件中的某些按钮以从子组件发出数据到父组件时，但在我的例子中，我的子组件中没有任何按钮。那么有什么有效的方法可以达到同样的效果吗?或者我不应该使用这种方法?有没有人在斯塔克布利茨有例子?

提前感谢!!

Answer 1

如果您传递一个对象作为@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
}

其他配置，给我们更多的数据:)