EventEmitter — Angular

Используйте в компонентах с директивой @Output для синхронной или асинхронной отправки пользовательских событий и регистрации обработчиков этих событий путем подписки на экземпляр.

API

interface EventEmitter<T> extends Subject<T>, OutputRef<T> {
  emit(value?: T | undefined): void;
  subscribe(next?: ((value: T) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription;
  subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription;
}

emit

void

Отправляет событие, содержащее заданное значение.

@paramvalueT | undefined

Отправляемое значение.

@returnsvoid

Примечания по использованию

Расширяет RxJS Subject для Angular, добавляя метод emit().

В следующем примере компонент определяет два выходных свойства, создающих эмиттеры событий. При нажатии на заголовок эмиттер отправляет событие открытия или закрытия, чтобы переключить текущее состояние видимости.

@Component({
  selector: 'zippy',
  template: `
  <div class="zippy">
    <div (click)="toggle()">Toggle</div>
    <div [hidden]="!visible">
      <ng-content></ng-content>
    </div>
 </div>`})
export class Zippy {
  visible: boolean = true;
  @Output() open: EventEmitter<any> = new EventEmitter();
  @Output() close: EventEmitter<any> = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

Получите доступ к объекту события с помощью аргумента $event, переданного обработчику выходного события:

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>