Angular 8: Карта листовок не определена, когда мы уходим и возвращаемся на страницу

Question

В моем жизненном цикле ngOnInit я создаю карту с помощью листовки.

HTML

 <div id="map" style="width:100%;height:100%"></div>

TS

import * as L from 'leaflet';


  ngOnInit() {
  this.map = map('map').setView([38.914764662971436, -97.01461108304595], 13);


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.map);
}

После этого я загружаю некоторые данные и отображаюиконки, использующие только L.marker...addTo .. и все это прекрасно работает.Проблема возникает, когда я перехожу на другую страницу, а затем снова захожу на предыдущую страницу, на которой есть листовка, карта загружается, и я вижу ее, но значки не создаются, а this.map переменная undefined.

Нужно ли каким-то образом полностью удалять карту на ngOnDestroy жизненном цикле?Кажется, что листовка хранит карту в памяти или что-то в этом роде, а затем использует ее вместо создания новой.

Вот демонстрация Stackblitz ... достаточно странно ... она работает там, даже когда я создал код samoe.. https://stackblitz.com/edit/angular-leaflet-map

Answer 1

Хорошо, проблема не в создании карты.

Произошло то, что произошло из-за получения данных перед созданием карты:

Первое открытие компонента:

• Данные загружаются из API и асинхронно сохраняются в хранилище
• Карта создается
• Данные выбираются после создания карты, поэтому добавляются маркеры

Второй раз при открытии компонента:

• Вместо вызова API данные извлекаются из хранилища
• Данные выбираются до создания карты
• Карта
• Маркеры не отображаются, так как карта не создается

Что я сделал, чтобы исправить это?Ожидание создания карты перед добавлением терминалов.

Answer 2

вы должны использовать AfterViewInit, как в вашем примере