使用懒加载改造现有页面

发布时间 2018-5-23 16:07:45 浏览量() 收藏(1)

配置懒加载需要以下几个步骤：

给需要懒加载的页面配置module.ts；
在对应页面的.ts文件里增加@IonicPage()特性；
在app.module.ts移除页面引用；
使用懒加载；
懒加载运行效果图；

1.配置module.ts

依次配置about.module.ts、contact.module.ts、home.module.ts、tabs.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 { }

contact.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';

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

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

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

tabs.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';

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

配置完成后目录如下：

2.增加@IonicPage()特性

以about.ts为例，在@Component上方加上@IonicPage特性(行号4),其他需要懒加载的页面也需要配置。

3.在app.module.ts移除页面引用；

将配置过懒加载的页面，在app.module.ts中进行移除引用，移除后的代码如下：

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 { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{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';


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

tabs.ts

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

@IonicPage()
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {

tab1Root = 'HomePage';
tab2Root = 'AboutPage';
tab3Root = 'ContactPage';

constructor() {

}
}

5.懒加载运行效果图

首次加载时，只会加载tabs和home，当点击“contact”时才会加载contact

广告会让浏览体验不好，可这是网站的唯一收入，请点击下面的百度广告，支持老高的开源行动吧！