Angular Material 对话框显示两次

Question

我使用 Leaflet 绘制地图并尝试使用 Angular Material 显示一些模态，但遇到了问题。

当用户点击地图时，模式 (ModalComponent) 应该打开，为此我添加了一个点击事件（参见 MapComponent）。 在这个事件中，我调用了一个方法，this.modalService.openModal，它将打开模式。

问题是模态打开是空的。如果我按下 ok/cancel，它应该关闭模式，这将再次呈现，但数据正确。当我第二次按下按钮时，模态将关闭。

我观察到的奇怪行为是模式通过构造函数而不是通过 ngOnInit 方法。只有在我点击一个按钮后，它才会通过 ngOnInit。

您可以在此处找到示例代码： https://stackblitz.com/edit/angular-ivy-ptqcvv?file=src%2Fapp%2Fmap%2Fmap.component.html

这是我的配置：

• npm 6.13.4
• Angular CLI 8.3.29
• Angular 8.2.14
• 角材料 8.2.3
• 谷歌浏览器 84

有人知道发生了什么吗？

Answer 1

onMapReady 回调在 Angular 区域之外执行，导致未执行 Angular 更改检测。

您应该将该执行带回 Angular 区域，以便更改检测正常工作。

import { NgZone } from '@angular/core';

export class MapComponent  {
  constructor(private zone: NgZone, ...) {}

  onMapReady(map: Map) {
    this.map = map;
    console.log('map ready'); 

    this.map.addEventListener('click', () => {
      console.log('clicked')
      this.zone.run(() => this.modalService.openModal())
    })
  }
}

Forked Stackblitz