Блог

Рассмотрим очень простое приложение Angular 11 с использованием пакетов @asymmetrik/ngx-leaflet и @runette/ngx-leaflet-sidebar. Моя цель — просто правильно отобразить пустую боковую панель.

Рабочий пример

Рабочий пример приведен в этом руководстве (которое, к сожалению, завершается неудачей при запуске на Angular 11 из-за некоторых отсутствующих ссылок на типы и некоторых неправильных определений свойств, но вы можете найти исправленный и упрощенный код здесь).

В примере определен пользовательский компонент osm-map для хранения некоторых сведений о карте:

 <!-- app/osm-map/osm-map.component.html -->
<div class="map-container" leaflet
  [leafletOptions]="options"
  (leafletMapReady)="onMapReady($event)"
></div>
 

интересная часть здесь заключается в том, что исходное событие leafletMapReady , генерируемое сторонним компонентом листовки, фиксируется методом onMapReady() component, который просто сохраняет созданную карту и генерирует новое событие для уведомления остальной части приложения о наличии новой карты:

 // app/osm-map/osm-map.component.ts
...
@Output() map$: EventEmitter<Map> = new EventEmitter();
public map: Map;
...
onMapReady(map: Map) {
  this.map = map;
  this.map$.emit(map);
}
 

Затем пользовательский osm-map компонент используется корневым app компонентом, который также определяет элемент управления боковой панелью:

 <!-- app/app.component.html -->
<app-osm-map
  [options]="mapOptions"
  (map$)="receiveMap($event)"
></app-osm-map>

<leaflet-sidebar-control
  [map]="map"
  [options]="sidebarOptions"
></leaflet-sidebar-control>

<div id="sidebar" class="leaflet-sidebar collapsed">
  ...
</div>
 

интересная вещь здесь заключается в том, что мы регистрируем receiveMap() метод в качестве прослушивателя для пользовательского map$ события, сгенерированного osm-map компонентом. Этот прослушиватель не делает ничего, кроме обновления свойства map компонента, которое связано со map свойством leaflet-sidebar-control компонента:

 // app/app.component.ts
...
public map: Map;
...
receiveMap(map: Map) {
  this.map = map;
}
 

Нерабочий пример

Начиная с примера, описанного ранее, я просто хочу сделать это: переместить код из osm-map компонента в корневой app компонент.

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

 <!-- app/app.component.html -->
<div class="map-container" leaflet
  [leafletOptions]="mapOptions"
  (leafletMapReady)="receiveMap($event)"
></div>

<leaflet-sidebar-control
  [map]="map"
  [options]="sidebarOptions"
></leaflet-sidebar-control>
 

 // app/app.component.ts
...
public map: Map;
...
receiveMap(map: Map) {
  this.map = map;
}
 

Однако это не работает: боковая панель неправильно зарегистрирована на карте, ее HTML-код не перемещается под элементом карты и неправильно отображается справа.

У меня сложилось впечатление, что я чего-то не понимаю в отношении того, как карта привязана к боковой панели листовки: возможно, то, как это делается во втором примере, привязка выполняется до фактического создания карты или что-то в этом роде?