在 leaflet on("click", function()) 操作后打开一个 Angular Material 对话框

Question

我想在单击传单圆圈时打开一个 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) 再次实例化了我的组件，它必须在对话框显示正确之前加载整个组件。但我不确定这一点，也不知道是否有解决方法。

Answer 1

发生此错误是因为点击函数中的代码未在 Angular 上下文中执行。可以使用 NgZone 修复。

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

在 leaflet on("click", function()) 操作后打开一个 Angular Material 对话框

Open a Angular Material Dialog after an leaflet on("click", function()) action

leaflet

angular-material

angular

ngx-leaflet