配置ionic3懒加载步骤:
1.给需要懒加载的页面配置module.ts;
例:配置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.在对应页面的.ts文件里增加@IonicPage()特性;
以about.ts为例,在@Component上方加上@IonicPage()特性(行号4,注意在上面引用IonicPage(见2行)),其他需要懒加载的页面同样操作配置。
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) {
}
}
3.在app.module.ts移除页面引用;
将配置过懒加载的页面,在app.module.ts中进行移除引用,移除后的代码如下:
import {HttpModule} from "@angular/http";
import {AppService} from "./app.service";
import {NgModule, ErrorHandler} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';
import {MyApp} from './app.component';
//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导入,只需要将之前的页面名字用引号引起来即可:
例: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 {TabsPage} from "../pages/tabs/tabs";
@Component({
templateUrl: 'app.html'
})
export class MyApp {
//不需要在顶部进行import导入,只需要将之前的页面名字用引号引起来即可
//rootPage:any = TabsPage;
rootPage:any = 'TabsPage';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
配置完成。