在最初使用ionic的时候,根据教程学习使用ionic搭建一个移动app的时候发现里面的组件全部是使用的全屏加载的方式进行,根据查询相关的资料学习了如何实践ionic3懒加载方式。。。
相关参考资料:
http://www.jianshu.com/p/a445b497cb60
对应的英文文档:
https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit#
以下是我进行的步骤
这是app.component.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 { Http, XHRBackend, RequestOptions, HttpModule} from "@angular/http";
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
分别在home,about,contact文件夹下创建home.module.ts
import { NgModule } from '@angular/core';
import { HomePage} from './home';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
declarations: [HomePage],
imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }
about.module.ts
import { NgModule } from '@angular/core';
import { AboutPage} from './about';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
declarations: [AboutPage],
imports: [IonicPageModule.forChild(AboutPage)],
})
export class AboutPageModule { }
contact.module.ts
import { NgModule } from '@angular/core';
import { ContactPage} from './contact';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
declarations: [ContactPage],
imports: [IonicPageModule.forChild(ContactPage)],
})
export class ContactPageModule { }
第二步,在对应的home.ts,about.ts,contact.ts中加入
import { IonicPage } from 'ionic-angular';
@IonicPage({segment: 'xxx'}) //这里的segment是路由标识
@Component({
---
})
第三步,将tab.ts中的地址改边一下
tab1Root = 'HomePage';
tab2Root = 'AboutPage';
tab3Root = 'ContactPage';
这里的HomePage 默认是与组件名称一致的,如果需要修改HomePage,@IonicPage中的name也要对应修改
第四步,删除app.module.ts中的HomePage,AboutPage,ContactPage的相关引用