Что такое OutputEmitter (EventEmitter) в Angular и как он используется?

Что такое OutputEmitter в Angular?

OutputEmitter — это декоратор в Angular, который используется для определения пользовательских событий в дочернем компоненте. Он позволяет дочернему компоненту уведомлять родительский компонент о каких-либо изменениях или действиях, передавая при этом данные. OutputEmitter работает в паре с классом EventEmitter, который предоставляет методы для эмиссии событий.

Как это работает?

Дочерний компонент объявляет свойство с декоратором @Output() и типом EventEmitter. Затем, при наступлении определенного события (например, клик пользователя), дочерний компонент вызывает метод emit() на этом EventEmitter, передавая нужные данные. Родительский компонент в своем шаблоне подписывается на это событие, используя синтаксис привязки в круглых скобках (eventName)="handler($event)".

Пример кода

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendData()">Send</button>`
})
export class ChildComponent {
  @Output() dataEvent = new EventEmitter<string>();

  sendData() {
    this.dataEvent.emit('Hello from child!');
  }
}

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child (dataEvent)="handleData($event)"></app-child>`
})
export class ParentComponent {
  handleData(data: string) {
    console.log(data); // 'Hello from child!'
  }
}

Где применяется?

OutputEmitter используется в любом сценарии, где требуется передать данные или сигнал от дочернего компонента к родительскому. Это может быть обработка кликов, отправка форм, уведомление об изменении состояния и т.д. Он является ключевым элементом для построения иерархии компонентов и организации их взаимодействия.

Вывод

OutputEmitter — это мощный инструмент для создания гибких и переиспользуемых компонентов в Angular. Он позволяет четко разделить ответственность между компонентами, обеспечивая однонаправленный поток данных и событий. Используйте его, когда дочернему компоненту нужно сообщить родителю о каком-либо действии или передать данные наверх по иерархии.