ionic 2/3 : 스플래시 화면 한 번 표시

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

}