Ionic 2 - Screen Flash

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; 

，然後你又承諾後，將其設置已解決：

this.rootPage = TabsPage; 

爲了解決這個問題，只需將rootPage初始化爲null即可T，然後它會用正確的頁面初始化時承諾解決：

@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（而不是被推送）。