イオン3角度4ネイティブGoogleMapsライフサイクルイベント：実際の注文とは何ですか？

Question

イベントを正しい順序で起動する方法を見つけることに問題があります。私が理解から、注文は以下の通りである。

ionViewDidLoad - > ionViewWillEnter - > ionViewDidEnter - > ionViewWillLeave - > ionViewDidLeave

しかし、私の質問は、コンストラクタは、ライフサイクルに行くんですか？そして、platform.readyはどうですか？コンストラクタでGoogle Maps APIを読み込む予定のイベントがありますが、なんらかの理由で他のすべてのイベントが発生する前に、特にthis.platform.ready().then()を使用した場合に発生するようです。

ここに関連するコードです：

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { Http } from '@angular/http'; 
import { Storage } from '@ionic/storage'; 
import { TabsPage } from '../pages/tabs/tabs'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class CanalGuide { 
    rootPage:any = TabsPage; 
    public types; 
    public places; 

    constructor(public http: Http, public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public storage: Storage) { 
     platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     statusBar.styleDefault(); 
     this.readyTypes(); 
     this.readyPlaces(); 
     splashScreen.hide(); 
     }); 
    } 

home.tsが

import { Component, ViewChild } from '@angular/core'; 
import { Platform, NavController } from 'ionic-angular'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/forkJoin'; 
import { Storage } from '@ionic/storage'; 

import { 
GoogleMaps, 
GoogleMap, 
GoogleMapsEvent, 
LatLng, 
MarkerOptions, 
Marker 
} from '@ionic-native/google-maps'; 
import { DetailsPage } from '../details/details'; 
import { SettingsPage } from '../settings/settings'; 
import { SettingsService } from '../settings/settings.service'; 

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

    public types; 
    public places; 
    public landmarks; 
    public launches; 
    public structures; 
    public docks; 
    public landmarkArray: any[] = []; 
    public launchArray: any[] = []; 

    constructor(public navCtrl: NavController, public platform: Platform, public http: Http, private googleMaps: GoogleMaps, public storage: Storage) {} 
    // Gets json file and prepares to create markers 

    ionViewDidLoad(){ 
     this.storage.get('places').then(
     data => { 
      this.places = data; 
      this.initMap(this.places); 
     }, 
     error => { console.log('Error:', error); } 
    ); 
    } 

    } 

ionViewDidEnter(){ 
    if (this.landmarkArray.length < 1) 
    return false 
    else 
     this.storage.get('types').then((data) => { 
     this.types = data; 
     }).then(() => { 
     this.storage.get('launches').then((data) => { 
     this.launches = data; 
     console.log(this.launches); // returns Array(0) 
     if (this.types.types[3].enabled === false) 
      this.launches.launches.ForEach((launch) => { 
       launch.setVisible(false); 
      }); 
     else this.launches.launches.ForEach((launch) => { 
       launch.setVisible(true); 
      }); 
      }); 
     }).then(() => { 
     this.storage.get('landmarks').then((data) => { 
     this.landmarks = data; 
     console.log(this.landmarks); // returns Array(0) 
     if (this.types.types[4].enabled === false) 
      this.landmarks.landmarks.ForEach((landmark) => { 
       landmark.setVisible(false); 
      }); 
     else this.landmarks.landmarks.ForEach((landmark) => { 
       landmark.setVisible(true); 
      }); 
      }); 
     }); 
    } 
} 

誰もが私のionViewDidEnterが私のコンストラクタの前に発射された理由として、いくつかの洞察を提供することができます

app.component.tsは、 home.tsで、私は彼らが正しい順序で発射されることを確認するために何ができるのですか？

main.js:338 undefined 
main.js:339 undefined 
vendor.js:117149 Ionic Native: deviceready event fired after 5760 ms 
main.js:306 [] 
main.js:307 [] 

Answer 1

だから、コンストラクタ火災を最初に、ionViewDidLoadの前に：私は回避策なしionic cordova run android でこれを実行すると

は、ここに私のログがどのように見えるかです。

プラットフォーム準備については、のapp.componentコンストラクタを参照してください。このイベントはネイティブ機能を使用できるかどうかを示し、ブラウザで実行している場合はDOMの準備ができたら通知します。

As stated in the official docs

platform.ready().then() GMaps初期化コードを配置するあなたのスポットです。

EDIT今、あなたはいくつかのコードを追加しましたし、あなたがapp.component.tsでGoogleマップライブラリをインスタンス化されていませんが、あなただけのデータをフェッチし、それを格納していることを1

、いくつかあります修正すべき事項のあなただけthis.storage.get(...)にplatform.ready().then()でそれをラップすることなく、あなたのionViewDidEnterでも、それを削除することができhome.tsにおけるので

platform.ready（）

しかapp.component.tsに行きます、これは問題を引き起こしているので、あなたは物事が変な順序で発射されるのを見ているのです。

安定したデータフローが得られるはずです。