OpenLayers 4-离子2即使加载了地图，也不会在更改页面之后显示地图

Question

我正在制作一个具有2页的应用程序，在每个页面上都有一个地图。问题是在启动应用程序时，显示了一个地图。但是在那之后，我转到第二页，即使创建了对象映射，也没有什么。而且，如果我回到第一页，即使第一次，也没有什么。（在页面的左侧只有一个深灰色的矩形）。

在2页上，地图的创建是相同的。

谢谢您的帮助！

page1.ts

import { Component , ViewChild, Renderer, ElementRef} from '@angular/core';
import { Platform } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { MapProvider } from '../../providers/map-provider';
@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {
  @ViewChild('map') map: ElementRef;
  constructor(public navCtrl: NavController,platform: Platform, public renderer: Renderer, public mapService: MapProvider) { }
  ionViewDidLoad(){
      this.map = this.mapService.loadMap(this.map);
      console.log(this.map);
  }
}

第2页相同

page1.html

<ion-content>
    <div id="map" #map class="map" cache-view="false">
      <button class="geolocateButton" color="danger" ion-button icon-only (click)="geolocate()">
          <ion-icon name="locate"></ion-icon>
      </button>
    </div>
</ion-content>

map-provider.ts

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import * as ol from 'openlayers';
@Injectable()
export class MapProvider {
  constructor() {}
  loadMap(map){
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
    return map;
  }
}

Answer 1

在settimeout中包装它怎么样？

setTimeout(() => {
         this.loadMap(map);
       }, 500);