Блог

Я использую листовку для рисования карты и пытаюсь использовать Angular Material для отображения некоторых модалов, но я столкнулся с проблемой.

Модальный ( ModalComponent ) должен открываться, когда пользователь нажимает на карту, для чего я добавил событие щелчка (см. MapComponent ). Внутри этого события я вызываю метод this.modalService.openModal , который откроет модальный.

Проблема в том, что модальное окно открывается пустым. Если я нажму ok / cancel, что должно закрыть модал, это отобразится снова, но с правильными данными. Во второй раз, когда я нажимаю на кнопку, модальное окно будет закрыто.

Странное поведение, которое я наблюдал, заключается в том, что модальное проходит через конструктор, но не через метод ngOnInit. Только после того, как я нажимаю на кнопку, он проходит через ngOnInit.

Здесь вы можете найти пример кода:https://stackblitz.com/edit/angular-ivy-ptqcvv?file=src/app/map/map.component.html

Вот моя конфигурация:

• npm 6.13.4
• Angular CLI 8.3.29
• Angular 8.2.14
• Angular Material 8.2.3
• Google Chrome 84

Есть ли у кого-нибудь представление о том, что происходит?

onMapReady обратный вызов выполняется за пределами угловой зоны, что приводит к отсутствию обнаружения изменения угла.

Вы должны вернуть это выполнение в Angular zone, чтобы обнаружение изменений работало должным образом.

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

Разветвленный стекблитц