Использование @Output() в Angular для передачи данных от дочернего компонента к родительскому

В Angular, для передачи данных от дочернего компонента к родительскому используется декоратор @Output(). Указывая @Output(), мы создаем событие, которое может "происходить" в дочернем компоненте и быть "поймано" в родительском компоненте.

Пример использования @Output():

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendToParent()">Отправить в родителя</button>
  `,
})
export class ChildComponent {
  @Output() eventFromChild = new EventEmitter<string>();

  sendToParent() {
    this.eventFromChild.emit('Данные от дочернего компонента');
  }
}

В приведенном выше примере, мы импортируем Output и EventEmitter из @angular/core. Нам нужен EventEmitter, чтобы создать новое событие. В данном случае, это eventFromChild. В функции sendToParent мы используем emit, чтобы "вызвать" это событие и передать данные ('Данные от дочернего компонента').

Нам также нужно "слушать" это событие в родительском компоненте:

<app-child (eventFromChild)="receiveData($event)"></app-child>

Здесь мы используем синтаксис Angular (event)="method($event)", чтобы "поймать" событие и вызвать метод receiveData.

В то время как @Input() используется для передачи данных от родительского компонента к дочернему, @Output() используется для передачи данных от дочернего компонента к родительскому. Оба эти декоратора являются фундаментальной частью механизма связи между компонентами, одна из ключевых особенностей Angular.