Typescript 离子2/3:一次显示启动屏幕

Typescript 离子2/3:一次显示启动屏幕,typescript,ionic-framework,ionic3,splash-screen,Typescript,Ionic Framework,Ionic3,Splash Screen,我有一个ionic应用程序,当我启动应用程序并显示主页时,会打开一个启动屏幕,问题是当我从一个页面返回到另一个主页时,启动屏幕会再次出现!我希望在应用程序启动时只显示一次 以下是html主页的代码: <div id="custom-overlay" [style.display]="splash ? 'flex': 'none'"> <div class="flb"> <div class="Aligner-item Aligner-item

我有一个ionic应用程序,当我启动应用程序并显示主页时,会打开一个启动屏幕,问题是当我从一个页面返回到另一个主页时,启动屏幕会再次出现!我希望在应用程序启动时只显示一次

以下是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>

有人能帮忙解决这个问题吗!谢谢。

我认为您需要使用本地存储:

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

将启动屏幕创建为单独的页面,然后使用setTimeout()将主页设置为rootPage。 在新创建的启动屏幕中使用以下代码。ts

ionViewDidLoad(){

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

}

在ionViewDidLoad()方法中?是的,您可以将它放在那里?
ionViewDidLoad(){

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

}