0

当我单击传单圆圈时，我想打开一个 Angular Material 对话框。对话框出现，但行为奇怪。当我使用普通按钮（单击）事件打开对话框时，不会出现这种奇怪的行为。

奇怪的行为

我尝试像这样调用函数。我将 onClickCircles 函数绑定到我的圈子。

let line = L.circle(latlngEx, { radius: this.circles[i].radius }).on(
          "click",
          this.onClickCircles.bind(this)
        );

当按下圆圈时，我打开对话框

onClickCircles(e) {
    const dialogRef = this.dialog.open(MarkerdetailComponent, {
      width: "300px",
      data: { event: e, collection: "circles" }
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log("closed")
    });
    //this.deleteCircles(e.target);
  }

当从其他任何地方调用 onClickCircle(e) 时，它工作正常。我猜是因为 .bind(this) 再次实例化了我的组件，并且它必须在对话框出现正确之前加载整个组件。但我不确定这一点，也不知道是否有解决方法。

4

1 回答 1

2

发生此错误是因为 click 函数内的代码未在 Angular 上下文中执行。它可以通过使用 NgZone 来修复。

let line = L.circle(latlngEx, { radius: this.circles[i].radius }).on(
          "click",
          e => {
            this.zone.run(() => {
              this.onClickCircles(e)
              })
          }
        );
于 2020-02-21T19:19:51.577 回答