ionic3 專案 懶載入配置

dh_____6666發表於2019-02-16

配置懶載入需要以下幾個步驟：

1.給需要懶載入的頁面配置module.ts；
2.在對應頁面的.ts檔案裡增加@IonicPage()特性；
3.在app.module.ts移除頁面引用；
4.使用懶載入；
5.懶載入執行效果圖；

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 { }

配置完成後目錄如下

2.增加@IonicPage()特性

以about.ts為例，在@Component上方加上@IonicPage(),其他需要懶載入的頁面也需要配置

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

4.使用懶載入

使用懶載入，只需要將之前的頁面名字用引號引起來即可，對應的也不需要在頂部進行import匯入

tabs.ts

import { IonicPage } from `ionic-angular`;
import { Component } from `@angular/core`;
@IonicPage()
@Component({
  templateUrl: `tabs.html`
})
export class TabsPage {
  tab1Root = `HomePage`;
  tab2Root = `ContactPage`;
  tab3Root = `AboutPage`;
  constructor() {
  }
}

注意：當某個頁面使用懶載入後，報錯沒有找到，原因是tabs裡面引入要加 雙引號 tab2Root = “AboutPage”;

相關文章