ionic 2/3：スプラッシュ画面を1回表示する

Question

私は、アプリケーションを起動してホームページを表示するときにスプラッシュ画面を開いたイオンアプリケーションを持っていますが、問題はスプラッシュ画面からページに戻るときです再び表示されます！私はそれがアプリが立ち上げられたときに一度だけ表示されるようにしたい。ここで

は、HTMLホームページのコードです：

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'"> 
    <div class="flb"> 
     <div class="Aligner-item Aligner-item--top"></div> 
     <img class="splash-screen-logo" src="img/logo.svg"> 
     <div class="Aligner-item Aligner-item-bottom"></div> 
    </div> 
</div> 
<ion-header> 
    <ion-toolbar color="primary"> 
     <div class="search-icon"> 
      <ion-icon name="ios-search" icon-only> 
      </ion-icon> 
     </div> 
     <ion-title class="bartitle"><b>parrot</b><small class="city">.city</small></ion-title> 
    </ion-toolbar> 
</ion-header> 

<ion-content> 

    <ion-card> 
     <img src="img/dirty.jpg"> 
     <ion-fab (click)="ParrotToast();" class="pubplace" left buttom> 
      <img src="img/place.png"> 
     </ion-fab> 
     <div class="row"> 
      <div class="puboptions col col-33"> 
       <ul class="row rowlist"> 
        <li class="col"> 
         <ion-icon class="col" name="md-ribbon"></ion-icon> 
        </li> 
        <li class="col"> 
         <ion-icon class="col" name="md-thumbs-up"></ion-icon> 
        </li> 
        <li class="col"> 
         <ion-icon class="col" name="md-share"></ion-icon> 
        </li> 
        <li class="col"> 
         <ion-icon class="col" name="md-more"></ion-icon> 
        </li> 

       </ul> 
      </div> 
     </div> 
     <ion-row> 
      <ion-col> 
       <ion-item class="pubinformation"> 
        <ion-avatar item-start> 
         <img src="img/profile.jpg"> 
        </ion-avatar> 
        <h3><b>Essie Bailey</b></h3> 
        <p> <small>ARTIST SPOTTER</small></p> 
       </ion-item> 
      </ion-col> 
      <ion-col> 
       <ion-item class="likes"> 
        <ion-note text-center> 
         <b class="likenumber">3 likes</b> 
        </ion-note> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-item class="pubinformation"> 
       <strong> Museé du Cinquantenaire</strong> 
       <small class="datepub">IL Y A 2 SEMAINES</small> 
      </ion-item> 
      <ion-col class="hashtagsdiv" padding width-10> 
       <p class="hashtags">#consectetur #adipiscing #elit #Aliquam #quis #ultrices #quam #at #interdum #ante</p> 
      </ion-col> 
     </ion-row> 
    </ion-card> 

    <ion-card> 
     <img src="img/dirty.jpg"> 
     <ion-fab (click)="ParrotToast();" class="pubplace" left buttom> 
      <img src="img/place.png"> 
     </ion-fab> 
     <div class="row"> 
      <div class="puboptions col col-33"> 
       <ul class="row rowlist"> 
        <li class="col"> 
         <ion-icon class="col" name="md-ribbon"></ion-icon> 
        </li> 
        <li class="col"> 
         <ion-icon class="col" name="md-thumbs-up"></ion-icon> 
        </li> 
        <li class="col"> 
         <ion-icon class="col" name="md-share"></ion-icon> 
        </li> 
        <li class="col"> 
         <ion-icon class="col" name="md-more"></ion-icon> 
        </li> 

       </ul> 
      </div> 
     </div> 

     <ion-row> 
      <ion-col> 
       <ion-item class="pubinformation"> 
        <ion-avatar item-start> 
         <img src="img/profile.jpg"> 
        </ion-avatar> 
        <h3>Essie Bailey</h3> 
        <p> <small>ARTIST SPOTTER</small></p> 
       </ion-item> 
      </ion-col> 
      <ion-col> 
       <ion-item class="likes"> 
        <ion-note text-center> 
         <b>3 likes</b> 
        </ion-note> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-item> 
       <strong> Museé du Cinquantenaire</strong> 
       <small class="datepub">IL Y A 2 SEMAINES</small> 
      </ion-item> 
      <ion-col class="hashtagsdiv" padding width-10> 
       <p class="hashtags">#consectetur #adipiscing #elit #Aliquam #quis #ultrices #quam #at #interdum #ante</p> 
      </ion-col> 
     </ion-row> 
    </ion-card> 

</ion-content> 

、ここでは、TSファイルです：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { ParrotToastPage } from '../parrot-toast/parrot-toast' 

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

    splash=true; 
    tabBarElemen: any; 
    LogoSplashScreen: any; 


    constructor(public navCtrl: NavController) { 
    this.tabBarElemen = document.querySelector('.tabbar'); 

    } 

    ionViewDidLoad(){ 
    this.tabBarElemen.style.display = 'none'; 

    setTimeout(() => { 
     this.splash = false; 
    this.tabBarElemen.style.display = 'flex'; 

    }, 2000); 
    } 

    ParrotToast(){ 
    this.navCtrl.push(ParrotToastPage); 
    } 

} 

誰かがこの問題を解決するために助けてくださいすることができます！ありがとう。

this.storage.get('splash').then((splash) => { 
    if (splash == undefined || splash == null) { 
    this.storage.set('splash', 'visit'); 
    //show splash 
    } 
}); 

Answer 1

は別のページとしてスプラッシュ画面を作成し、rootPageとしてホームページを設定するには（）のsetTimeoutを使用します。

Answer 2

は、私はあなたがローカルストレージを使用する必要があると思います。新しく作成したスプラッシュscreen.tsのコードionViewDidLoad（）メソッドで

ionViewDidLoad(){ 

    setTimeout(() => { 
    this.navCtrl.setRoot(HomePage); 
    }, 2000); 

}