Question

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

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

问题在于模态打开为空。如果按ok / cancel（确定）/ 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
角度8.2.14
角材料8.2.3
Google Chrome 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

角度材料对话框显示两次

1 个答案: