ionic 懒加载

1. 配置about.module.ts

import { NgModule } from '@angular/core';  
import { IonicPageModule } from 'ionic-angular';  
import { AboutPage } from './about';  

@NgModule({  
  declarations: [  
  AboutPage,  
  ],  
imports: [  
  IonicPageModule.forChild(AboutPage),  
],  
})  
export class AboutPageModule { }

2、对应的about.ts

在@Component上方加上@IonicPage()特性,其他需要懒加载的页面同样操作配置。

import {Component} from '@angular/core';  
import {NavController, IonicPage} from 'ionic-angular';  

@IonicPage()  
@Component({  
  selector: 'page-about',  
  templateUrl: 'about.html'  
})  
export class AboutPage {  

  constructor(public navCtrl: NavController) {  
}  
}

2. 在app.module.ts移除页面引用

//import {AboutPage} from "../pages/about/about";  

import {StatusBar} from '@ionic-native/status-bar';  
import {SplashScreen} from '@ionic-native/splash-screen';  

@NgModule({  
declarations: [  
  MyApp  
  //AboutPage  
],  
imports: [  
  BrowserModule,  
  HttpModule,  
  IonicModule.forRoot(MyApp)  
],  
bootstrap: [IonicApp],  
entryComponents: [  
  MyApp  
  //AboutPage  
  ],  
providers: [  
  StatusBar,  
  SplashScreen,  
  AppService,  
  {provide: ErrorHandler, useClass: IonicErrorHandler}  
]  
})  
export class AppModule {  
}

4、使用懒加载

不需要在顶部进行import导入，只需要将之前的页面名字用引号引起来即可

例：this.navCtrl.push('AboutPage')