javascript - Angular：来自未定义子项的数据

Question

简单的问题：我想在单击按钮时将数据从子项传递给其父项，但父项中的数据始终未定义。我看过：Angular 的文档和大量的帖子已经解决了这个问题，但我仍然坚持它所以..

子组件 ( <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);
    
  }

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

为什么它是未定义的？

标签： javascripthtmlangulardata-binding

Answer 1

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

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

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