IONIC 5如何在没有白屏的情况下重新加载页面

Question

当我在IONIC 5应用程序上实现它时，我的问题是每次我重新加载页面时，它都会显示我设置的微调器和图像，但在微调器完全重新加载后，应用程序会显示1到2秒的白屏，然后只显示我想要的页面。

所以，我的问题是如何在没有白屏显示的情况下重新加载页面？

我已经在我的应用程序中设置了以下代码。组成部分html，所以每次我的应用程序重新加载页面时，它都会显示微调器和图像

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <div class="loading-overlay" *ngIf="loading" style="margin: auto;">
    <img src="assets/icon/favicon.png"style="height:150px;width:150px;"/> <br/>
    <!-- Bubbles Spinner -->
    <ion-spinner name="bubbles"></ion-spinner>&nbsp;
    <span>Please Wait..</span>
  </div>
</ion-app>

我的应用程序中的功能。组成部分ts

  constructor(private router: Router,
              private so: ScreenOrientation,
              private alertCtrl: AlertController,
              private platform: Platform,
              private _location: Location,
              ) {
   this.router.events.subscribe((e : RouterEvent) => {
      this.navigationInterceptor(e);
    })


    this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
          this.history.push(event.urlAfterRedirects)
        }
    })


   //Updated Code

  this.platform.ready().then(() => {
      setTimeout(function(){
        this.splashScreen.hide();
      }, 50);
    });
  }
  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true
    }
    if (event instanceof NavigationEnd) {
      this.loading = false
    }

    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this.loading = false
    }
    if (event instanceof NavigationError) {
      this.loading = false
    }
  }

下面是我如何重新加载页面的代码之一：

this.router.navigate(['/order'])
                .then(() => {
                  window.location.reload();
                });

Answer 1

如果此代码在你的应用程序中。组成部分ts，然后添加此

initializeApp() {
this.platform.ready().then(() => {

  this.splashScreen.hide();

})

在你的config.xml

 <preference name="SplashScreenDelay" value="3000" />

请注意，值可能会根据您的应用程序而更改

或者如果代码在页面中，您可以将代码添加到构造函数中，

或者您可以将setTimeout函数的值更改为更大的数字（如500、1000…等）