ionic 3.0懒加载机制 实现过程

一、ionic cli 2.0以上提供了自动生成器工具：

（1） 页面生成命令：

1、ionic g page home

（2）组件生成命令

1、ionic g component header

二、新建一个页面如：（shop）页面；

目录结构如图：

三、在 shop.module.ts文件中添加如下代码：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ShopPage } from './shop';

@NgModule ({
    declarations: [
        ShopPage
    ],
    imports: [
        IonicPageModule.forChild(ShopPage),
    ],
    exports: [
        ShopPage
    ]
})

export class ShopPageModule {

}

其中，IonicPageModule为官方提供的懒加载基础模块，import { ShopPage } 为引入shop页面, @NgModule.import为利用IonicPageModule导入ShopPage页面到当前ShopPageModule中，最后export到处当前模块ShopPageModule。

四、在shop.ts中添加如下代码：

import { Component } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';
import { App } from 'ionic-angular';

/**
 * Generated class for the ShopPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-shop',
  templateUrl: 'shop.html',
})
export class ShopPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public app:App) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ShopPage');
  }
}

解释：在shop.ts中我们利用官方提供的IonicPage ，导入我们新建的ShopPageModule模块。

（1） @IonicPage ()不传参

代表引入与当前到处的页面名字相对应的模块。

如：ShopPage页面对应ShopPageModule模块。

（2）@IonicPage({ name:'',segment:'' }) 传参

其中：name的值即为索要引入的模块名称，

segment的值为路由url中的值

这样我们就完成了ionic3.0中的页面懒加载。