Откройте диалоговое окно Angular Material после листовки о действии ("click", function ())

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)
              })
          }
        );