ionic-framework - 在屏幕外标签中初始化传单地图（当前不可见的离子幻灯片）

Question

我正在尝试以当前不可见的方式初始化传单地图ion-slide。滑动到此幻灯片时，地图容器的高度为 0，并且地图不可见。将地图容器的尺寸设置为固定大小时，地图可见但没有瓷砖可见，地图只是灰色的。

我试图再次调用invalidate()和删除/创建地图，但无济于事。

我的主页

import {
  Component
} from '@angular/core';
import * as leaflet from "leaflet";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map;

  constructor(){
  }

  onChange(event){
    if(this.map && event.realIndex == 2){
      this.map.invalidateSize()
    }
  }

  ionViewDidLoad(){
    this.map = leaflet.map("MAP").fitWorld();
    leaflet.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
  }

}

模板

<ion-content padding>
  <ion-slides (ionSlideDidChange)="onChange($event)">
    <ion-slide>
      a
    </ion-slide>
    <ion-slide>
      b
    </ion-slide>
    <ion-slide>
      <div id="MAP" style="width: 500px; height: 500px"></div>
    </ion-slide>
  </ion-slides>
</ion-content>

我希望第三张幻灯片包含一个初始化的地图，但它没有/只是灰色