angular - 输出 EventEmitter 始终未定义

Question

我有一个需要发出值的组件，但看在上帝的份上，我无法弄清楚为什么当我叫它。我在其他组件中有完全相同的代码并以相同的方式触发它，但它只是不想在这种情况下工作。

我在这里做错了什么吗？

export class DropdownOptionsSingleComponent implements AfterViewInit {
  @Input() current: any;
  @Output('currentChange') onCurrentChange: EventEmitter<any> = new EventEmitter();

  private isOpen: boolean = false;

  constructor(private _globals: GlobalVariablesService, private _elementRef: ElementRef) {
    this.ns = _globals.ns;

    document.addEventListener('click', (e) => {

      // If the clicked element is not the component element or any of its children, close the dropdown
      if (_elementRef.nativeElement !== e.target && !_elementRef.nativeElement.contains(e.target)) {
        this.isOpen = false;
      }
    });
  }

  ngAfterViewInit() {

    let list = this._elementRef.nativeElement.getElementsByClassName(this.ns + '-dos-list')[0];
    let options = list.getElementsByTagName('li');

    for (let option of options) {
      option.addEventListener('click', this.select);
    }
  }

  toggle() {

    if (this.disabled) {
      this.isOpen = false;

      return false;
    }

    this.isOpen = !this.isOpen;
  }

  close() {
    this.isOpen = false;
  }

  select(e) {
    this.current = e.target.getAttribute('data-model');

    // Error saying this.onCurrentChange is undefined...
    this.onCurrentChange.emit(this.current);
  }
}

Answer 1

原因是您引用了一个方法，因此丢失了执行上下文。使用以下内容代替:

option.addEventListener('click', (event) => {
  this.select(event);
});

或者bind方法:

option.addEventListener('click', this.select.bind(this));

但是在 TypeScript 中使用 bind 方法有一些缺点:

• https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html