Ionic 2 - 屏幕闪光

Question

我有一个登录页面和一个主页。我使用本机存储来设置一个项目，该项目将检查用户是否已经登录（Facebook 或 Google 身份验证）。如果该项目有一个值（此检查发生在 app.componenet.ts ），它将直接导航到主页。一旦用户登录，如果碰巧最小化应用程序并在一段时间后。当用户再次打开应用程序时，加载几秒钟后我会看到登录屏幕（用户已经登录时不应该看到）1 秒，然后它导航到主页。

这是我的app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
import { NativeStorage } from '@ionic-native/native-storage';
import { TabsPage } from '../pages/tabs/tabs';
import { Facebook } from 'ionic-native';
import { GooglePlus } from '@ionic-native/google-plus';
@Component({
  templateUrl: 'app.html',

})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = LoginPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage: NativeStorage, private alertCtrl: AlertController, private googlePlus : GooglePlus) {
    platform.ready().then(() => platform.ready().then(() => {
      this.nativeStorage.getItem("userId").then((data) => {
        console.log(data.userExists);
        this.rootPage = TabsPage;
        this.nav.push(TabsPage);

      }, (error) => {
        console.log("No data in storage");
        this.nav.push(LoginPage);
      })
      statusBar.styleDefault();
      splashScreen.hide();
    })

    )
  }

}

Answer 1

发生这种情况是因为您首先将 LoginPage 分配给 rootPage

rootPage: any = LoginPage;

然后在 promise 解决后再次设置它：

this.rootPage = TabsPage;

为了解决这个问题，首先只需将 rootPage 初始化为 null，然后在解决 promise 时使用正确的页面进行初始化：

@Component({
  templateUrl: 'app.html',
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = null; // <- I've changed this line

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage: NativeStorage, private alertCtrl: AlertController, private googlePlus : GooglePlus) {
    platform.ready().then(() => platform.ready().then(() => {
      this.nativeStorage.getItem("userId").then((data) => {
        console.log(data.userExists);
        this.rootPage = TabsPage;
        // this.nav.push(TabsPage); <- You don't need this line

      }, (error) => {
        console.log("No data in storage");
        // this.nav.push(LoginPage); <- Remove this line too :)
        this.rootPage = LoginPage; // <- Set the LoginPage as root
      })
      statusBar.styleDefault();
      splashScreen.hide();
    })

    )
  }

}

另请注意，我又更改了几行。将页面设置为根页面后就不需要推送了。另一个变化是，如果您想首先显示 LoginPage（因为用户尚未登录），则应将其设置为 rootPage（而不是推送）。

Ionic 2 - 屏幕闪光

Ionic 2 - Screen Flash

typescript

ionic2

ionic3

angular