Ionic 2 - 屏幕闪光灯 [英] Ionic 2 - Screen Flash

问题描述

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

I have a login page and a homepage. I use native storage to set an item which will check if the user has already logged in or not (Facebook or Google authentication). If the item has a value (this check happens ins app.componenet.ts )it is directly navigated to homepage. Once a user logs in and if happens to minimize the app and after some period of time. When the user again opens the app,after few sec's of loading I get to see the login screen (which should not be visible as the user has already logged in) for 1 sec and then it navigates to homepage.

这是我的 app.component.ts

This is my 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();
    })

    )
  }

}

推荐答案

这是因为您首先将 LoginPage 分配给 rootPage

That happens because you're first assigning the LoginPage to the rootPage

rootPage: any = LoginPage;

然后你在 promise 解决后再次设置它:

and then you're setting it again after the promise is resolved:

this.rootPage = TabsPage;

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

In order to fix that, just initialize the rootPage to null at first, and then it will be initialized with the right page when the promise is resolved:

@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(而不是推送).

Please also notice that I've changed a few more lines. You don't need to push a page after setting it as the root page. And the other change, is that if you want to show the LoginPage at first (because the user is not logged in yet) it should be set as the rootPage (and not be pushed).

这篇关于Ionic 2 - 屏幕闪光灯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！