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>

Почему он не определен?

Answer 1

Вам необходимо использовать $event вместо $data в прослушивателе событий:

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

Для дальнейшего чтения: https://angular.io/guide/user-input