Angular：来自未定义子项的数据答案

【问题标题】：Angular : Data from child undefinedAngular：来自未定义子项的数据
【发布时间】：2019-08-10 03:47:24
【问题描述】：

简单的问题：我想在单击按钮时将数据从子级传递给其父级，但父级中的数据始终未定义。我看过：Angular's Documentation 和许多帖子已经解决了这个问题，但我仍然坚持这样..

子组件 (<left-panel>) 有一个带有 (click)="handleAddTea()" 事件处理程序的按钮。当单击按钮 emit() 时，事件通过 EventEmitter 具有所需的 @Output 装饰器。

我将此EventEmitter绑定到父模板中的处理程序，并在数据前面带有$符号，如记录：(addTeaEvent)="handleAddTeaEvent($data)" 但是当handleAddTeaEvent函数触发时数据是undefined

下面是子组件中的相关代码：

  @Output()
  addTeaEvent: EventEmitter<any> = new EventEmitter<any>();

  handleAddTea() {
    console.log('Add Tea Clicked sending to parent..');
    this.addTeaEvent.emit(this.mainTitle)
  }

<button class="btn flex__item--middle btn--large btn--call-to-action" (click)="handleAddTea()">
    {{addBtnText}}
  </button>

这是父组件中的相关代码：

handleAddTeaEvent(stuff: any) {
    console.log('from parent', stuff);
    
  }

&lt;left-panel mainTitle="Add a tea" addBtnText="Add tea" (addTeaEvent)="handleAddTeaEvent($data)"&gt;&lt;/left-panel&gt;

为什么未定义？

【问题讨论】：

标签： javascript html angular data-binding

【解决方案1】：

您需要在事件监听器中使用$event 而不是$data：

<left-panel mainTitle="Add a tea" addBtnText="Add tea" (addTeaEvent)="handleAddTeaEvent($event)"></left-panel>

进一步阅读：https://angular.io/guide/user-input

【讨论】：