Question

我正在学习Angular。我想将一些数据从子组件传递到其父组件。这是一个非常基本的机制。我创建了一个最小的代码来更清楚地理解这个概念。这是stackblitz。这是完美的工作。但是，现在我想通过子组件中的input字段实现此目标，并且传递的值应反映在父组件的p标记中。我的实现存在一些错误。有人可以检查此stackblitz。

Answer 1

如果您直接在父组件上写任何内容，我都会为您创建一个简单的演示。您不必单击按钮。

StackBlitz

已更新

添加时代码中几乎没有问题 <child-app></child-app>在您的父组件中。您没有在子组件标签中添加@Output事件监听器。 <child-app (outputToParent)="GetOutputVal($event)"></child-app>
在html中，您必须在输入字段中编写一个事件。 <input type="text" (keydown)="sendToParent($event.target.value)">。 sendToParent()函数始终在每次按下按键时都发出事件，并在参数中带有文本框的值。

注意：我不建议在每次按键时都使用事件发射器。因为您的角度应用程序将在每次击键时触发事件，所以这是一种不好的做法。上面的堆叠闪电仅供学习之用。

Answer 2

您可以找到缺少值的解决方案。 https://stackblitz.com/edit/angular-wp2j5o

Answer 3

您已在子组件中使用Eventemitter来发出更新的值，但没有在父组件上添加侦听器。

父组件

  valueFromChild($event: any){
    this.recievedFromChild = "Value recieved from child: "+ $event;
  }

HTML

<child (outputToParent)="valueFromChild($event)"></child>

Answer 4

在StackBlitz下方说明了单击发送按钮时如何从子级向父级发送数据。

StackBlitz

Answer 5

在您的子组件中，将值设置为eventEmitter并在您的方法调用中发出它。

@Output() childComponentValue = new EventEmitter<any>();

sendToParent() {
    this.childComponentValue.emit(<your_value>);
}

现在在父组件中，

<child (childComponentValue)="recievedFromChild($event)"></child>

recievedFromChild(event) {
    console.log(event);
    // use the emitted event
}

将数据从子级传递到父级的正确方法是什么[角度]

5 个答案: