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

Question

我的[boolean]指令带有Output事件：

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

在我看来：

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

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

有办法吗？

Answer 1

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

您可以发出自定义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