javascript - Angular 2 - 如何在 addEventListener 处理函数中调用 typescript 函数？

Question

我正在尝试在添加到页面跨度的处理程序函数内调用另一个 typescript 函数(任何类型)。当我这样做时，处理函数工作正常并且会做一些基本的事情，例如设置变量、console.log 等。但是，当尝试调用任何类型的函数时，它会抛出错误“无法读取未定义的属性函数名” '.因此，例如，这是有效的代码:

addListenter() {
if (!this.addListenerFired) {
  let iterateEl = this.el.nativeElement.querySelectorAll('span');
  for (let i = 0; i < iterateEl.length; i++) {
    iterateEl[i].addEventListener('click', this.showExcerptInfo);
  }
  this.addListenerFired = true;
}
showExcerptInfo (): void {
  this.selectedExcerptId = event.srcElement.id;
  console.log(this.selectedExcerptId);
}

但是，如果我更改处理程序函数以执行以下操作(或调用位于任何位置的任何函数，即使在同一组件中)它也不会工作并抛出错误:

showExcerptInfo () {
  let excerpt = this.excerptsService.getExcerpt(this.selectedExcerptId);
}

关于为什么会发生这种情况和/或如何解决它的任何线索？

Answer 1

您需要注意 this 始终指向当前类实例:

iterateEl[i].addEventListener('click', this.showExcerptInfo.bind(this));

或者你可以使用

iterateEl[i].addEventListener('click', (evt) => this.showExcerptInfo(evt));