OpenLayers 4 - 地図がロードされていてもページを変更しても地図を表示しない

Question

私は2ページあるアプリケーションを作成しており、それぞれに地図があります。問題は、アプリケーションを起動するとマップが表示されることです。しかし、その後は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> 

地図-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);