click - 通过向元素动态添加“单击”事件打开 MatDialog

Question

我有一个 HTML 列表，我在其中动态设置 .active 类。具有此类的元素需要具有打开 MatDialog 的“单击”事件。问题是我在尝试执行类似操作时遇到错误：

Angular 组件 .html 文件

<ul>
  <li><span id="asd">asd</span></li>
</ul>

Angular 组件 .ts 文件

constructor(private el: ElementRef) {}
...
...
this.el.nativeElement.querySelector('#asd').addEventListener('click', this.selectTimeslot);
...
...
selectTimeslot() {
  let asd2: MatDialogRef<CalendarDialogComponent, any> = this.asd.open(CalendarDialogComponent, { disableClose: true });

  asd2.afterClosed().subscribe(result => {
    console.log(`Dialog result: ${result}`);
  });
}

然后，当我单击列表中的一个元素时，出现错误：

TypeError：无法读取未定义的属性“打开”

当我像这样在 HTML 中静态声明（单击）指令时，一切正常：

<ul>
  <li><span (click)="selectTimeslot()">asd</span></li>
</ul>

如何动态地将点击事件添加到 span 元素并能够在 Angular 9 中打开 MatDialog 组件？提前致谢。

Answer 1

我自己找到了解决方案。这是一个经典的“ this context”问题。

let self = this;
..
..
this.el.nativeElement.querySelector('#asd').addEventListener('click', function() { self.selectTimeslot(this););

在函数的开头，我创建了一个新变量，它指向 Angular 组件的上下文。然后作为参数，我传递了“点击事件”的上下文。