ionic3 实现懒加载方式 ---学习记录

在最初使用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的相关引用