通过向元素动态添加 'Click' 事件打开 MatDialog

Question

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

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: Cannot read property 'open' of undefined

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

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

如何在span元素上动态添加点击事件，并能够在Angular9中打开MatDialog组件？提前致谢。

Answer 1

我自己找到了解决办法。这是一个经典的“this 上下文”问题。

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

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

通过向元素动态添加 'Click' 事件打开 MatDialog

Open MatDialog via dynamically added 'Click' event to an element

click

angular9

mat-dialog