前一久在使用ionic2開發，但是對打開速度和加載速度有些不滿意，雖然知道ionic3使用懶加載，但也是這幾天才真正的全面升級到ionic3。
這是我的版本信息。。PS：我使用的ionic CLI是之前裝的，現在新裝ionic開發環境的話，許多命令已經改變，其中的Ionic Framework Version 就表示ionic框架的版本。
系統信息.PNG
廢話不多說，再來張圖：
使用命令行指令ionic g page demo創建頁面，里面的文件結構.PNG
主要說一下demo.module.ts這個文件，這是ionic3懶加載的基礎，如同ionic2/3的app.module.ts，它是進行組件注入，調用的文件，app.module.ts是整個項目一開始最先調用的部分，而demo.module.ts則是調用時再加載。
使用命令ionic g page demo 創建的頁面中的demo.ts文件并不能直接用于懶加載：
未修改過的demo.ts.PNG
要使用@IonicPage()修飾過后的：
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the Demo page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage() //這里加入修飾后，ionic在編譯時就會單獨將這個組件編譯成一個js文件，即脫離main.js
@Component({
selector: 'page-demo',
templateUrl: 'demo.html',
})
export class Demo {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Demo');
}
}
這是大家要進行懶加載前的第一步。
接下來看看
demo.module.ts.PNG
：
注釋：
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Demo } from './demo';
@NgModule({
declarations: [
Demo,
],
imports: [
IonicPageModule.forChild(Demo), //看到forChild就可以大膽猜測，為子頁面，這里我也是突然想到，就索性把它看作一個“作用域”吧！！
],
exports: [
Demo
]
})
export class DemoModule {}
我在引用一個自定義組件時，老是報錯，然后試了許多方法，開始是以為頁面先于組件加載，導致無法識別，但把自定義組件從app.module.ts里引入還是報錯；后來發現，在app.module.ts中引入，那么可以使用的范圍則是AppModule，貌似子頁面并沒有繼承AppModule里的東西。有了這個思路，就在demo.module.ts中引入自定義組件，果然沒有報錯！！
所以ionic3的懶加載就是子頁面的東西是獨立于其他的，包括引入的各類module，都是各管各的。
那么接下來再說一下關于如何調用~~
調用的話，只用在需要的地方使用字符串的形式即可：
this.navCtrl.push('Demo').present();
官網上是這么寫的，但用過navCtrl.push()的開發者應該知道，這個方法是彈出一個在父頁面上的頁面，非父頁面的東西，無法遮蓋（不知道這個表述有沒有問題）但我想使用modalCtrl.create()直接彈出一個新頁面，但modalCtrl.create()不認字符串，所以我采用如下方法：
import { Component} from '@angular/core';
import { ModalController, AlertController, MenuController } from 'ionic-angular';
...
@Component({
selector: 'page-xxx',
templateUrl: 'xxx.html'
})
export class XXX{
Demo:any = 'Demo';//這里的字符串必須要和deom.ts里的一致
constructor(...public: modalCtrl:ModalController,...){......}
openDemoPage(){
this.modalCtrl.create(this.Demo).present();
}
}
這樣就可以直接彈出一個全新的懶加載頁面了~~~~
寫在最后：
可能cnpm會少一些東西，如果無法實現，使用npm試試~~~
小白賣弄，如有錯誤，歡迎指正-
