如何将数据从子组件传递到父组件[Angular]

Posted 2023-02-23

【中文标题】如何将数据从子组件传递到父组件[Angular]

【英文标题】：How to pass data from child component to parent [Angular]

【发布时间】：2020-04-05 10:12:21

【问题描述】：

我正在学习 Angular。我想看看子组件Output 是如何将数据传递给父组件的。我浏览了一些文章和文档，然后创建了一个最小程序。我能够成功地将数据从父母发送到孩子，但反之亦然。我没有得到任何错误，但我也没有得到值。你能不能看看我的代码并纠正我。这是我的stackblitz。

【参考方案1】：

工作演示：demo

您错过了将ChildCurrentVal 放在app.component.html 中，而且您的子组件不仅只有在您的子组件从父组件接收到值时才会返回值，否则它会返回undefined。

【讨论】：

是的，Himanshu，我意识到了。这么愚蠢的错误。我是 Angular 和 Web 开发的新手。

@Tanzeel 没问题，很乐意提供帮助。

你能看看这个吗：stackblitz.com/edit/angular-ksdqyr

你的 parent.component.html <child (outputToParent)="GetOutputVal($event)"></child> 应该有这个。你的 child.component.html 缺少 ngModel 和 ngModelChange 像这样：<input type="text" [(ngModel)]="value" (ngModelChange)="sendToParent($event)">

【参考方案2】：

它正在工作，你只是没有在任何地方显示 ChildCurrentVal 的值。

放

ChildCurrentVal

在模板某处