在传单 on("click", function()) 操作后打开 Angular Material 对话框答案

【问题标题】：Open a Angular Material Dialog after an leaflet on("click", function()) action在传单 on("click", function()) 操作后打开 Angular Material 对话框
【发布时间】：2020-06-06 04:50:07
【问题描述】：

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

【问题讨论】：

当 1) 未正确加载模块或 2) 发生运行时错误（通常是由于在尝试设置样式之前未渲染 DOM）时，经常会发生这种情况。很多时候，这可以通过将 OnInit 项目设置为 AfterViewInit 来解决。除非您可以提供 StackBlitz，否则很难查明超出此范围的确切错误。

标签： angular angular-material leaflet ngx-leaflet

【解决方案1】：

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

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

【讨论】：