为什么主页在 app.component.ts 之前加载

Question

我希望在一切准备就绪时加载主页，但它在 app.component.ts 之前加载，我认为这导致提供程序无法正常工作，因为所有导入的东西都没有完全处理。

我尽我所能使主页延迟加载，但 console.log 仍然显示在 app.component.ts 之前加载的主页。

这是我的 app.module.ts，我导入主页模块而不是主页：

import { HomePageModule } from '../pages/home/home.module';
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    TabsPageModule,
    HomePageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
})
export class AppModule {}

这是我的 app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { firebaseConfig } from './credential'
import firebase from 'firebase';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'TabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });

    firebase.initializeApp(firebaseConfig);

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      console.log('Processing app.component.ts')
      if (!user) {
        this.rootPage = 'LoginPage';
        unsubscribe();
      } else {
        this.rootPage = 'TabsPage';
        unsubscribe();
      }
    });
  }
}

这是我的 tabs.ts:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = 'HomePage';
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  constructor() {
  }
}

下面是我的home.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, ) {
  }
  ionViewDidLoad() {
    console.log('homePage loaded')
  }
}

下面是它在我的 console.log 中显示的内容：

'homePage loaded'
'Processing app.component.ts'

请指教如何让 homepage 在 app.component.ts 之后加载，因为如果它在 app.component.ts 之前加载，则会导致 firebase 代码无法运行。

Answer 1

您需要删除在 app.component.ts 中的 rootPage 变量声明期间所做的初始化。

rootPage:any = 'TabsPage';

改为：

rootPage:any;

因为它最初会将具有第一个选项卡的 TabsPage 设置为主页。

为什么主页在 app.component.ts 之前加载

Why homepage loaded before app.component.ts

typescript

ionic-framework

ionic2

ionic3