ionic3开发系列——ionic3懒加载配置

配置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();    });  }}

配置完成。