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;

然后在承诺解决后再次设置：

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

this.rootPage = TabsPage;

为了解决这个问题，首先将rootPage初始化为null，然后将其初始化在承诺得到解决时使用正确的页面：

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屋！