Angular2 如何在组件代码中订阅事件？

Question

我有一个带有 Output 事件的 [boolean] 指令:

@Output() booleanChanged = new EventEmitter();
...
this.booleanChanged.emit(value);

在我看来:

<input type="checkbox" [boolean] (booleanChanged)="updateBoolean()"/>

我想从组件的代码而不是在 View 中订阅此事件。

有办法吗？

Answer 1

@Output() 事件只能由 (myoutput)="..." 绑定(bind)使用。

您可以发出自定义 DOM 事件。 DOM 事件冒泡并且可以从父组件中监听

class BooleanDirective {
  constructor(private elRef:ElementRef){}

  emitEvent() {
    final event = new CustomEvent('mycustomevent', {detail: 'abc', bubbles : true});
    this.elRef.nativeElement.dispatchEvent(event)
  }
}

@HostListener('mycustomevent', ['$event'])
myCustomEventHandler(event) {
  ...
}

另见 angular2 manually firing click event on particular element