角度材質對話框顯示兩次

Question

我使用 Leaflet 繪制地圖並嘗試使用 Angular Material 來顯示一些模態，但我遇到了一個問題。

當用戶點擊地圖時，模態（ ModalComponent ）應該被打開，為此我添加了一個點擊事件（參見MapComponent ）。 在這個事件中，我調用了一個方法this.modalService.openModal ，它將打開模態。

問題是模態打開是空的。 如果我按確定/取消，這應該關閉模態，這將再次呈現，但具有正確的數據。 第二次按下按鈕時，模態將關閉。

我觀察到的奇怪行為是，模態通過構造函數而不是通過 ngOnInit 方法。 只有在我點擊一個按鈕后，它才會通過 ngOnInit。

在這里你可以找到示例代碼： https : //stackblitz.com/edit/angular-ivy-ptqcvv?file=src%2Fapp%2Fmap%2Fmap.component.html

這是我的配置：

• npm 6.13.4
• 角 CLI 8.3.29
• 角 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())
    })
  }
}

分叉的堆棧閃電戰