ionic3項目實戰(zhàn)教程 - 第2講 ionic3懶加載配置

配置懶加載需要以下幾個步驟:

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

contact.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';

@NgModule({
    declarations: [
        ContactPage,
    ],
    imports: [
        IonicPageModule.forChild(ContactPage),
    ],
})
export class ContactPageModule { }

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
    declarations: [
        HomePage,
    ],
    imports: [
        IonicPageModule.forChild(HomePage),
    ],
})
export class HomePageModule { }

tabs.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';

@NgModule({
    declarations: [
        TabsPage,
    ],
    imports: [
        IonicPageModule.forChild(TabsPage),
    ],
})
export class TabsPageModule { }

配置完成后目錄如下

2-1.png

2.增加@IonicPage()特性

以about.ts為例,在@Component上方?加上@IonicPage特性(行號4),其他需要懶加載的頁面也需要配置。

2-2.png

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

將?配置過懶加載的頁面,在app.module.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 { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

4.使用懶加載

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

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = 'TabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

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() {

  }
}

5.懶加載運行效果圖

首次加載時,只會加載tabs和home

2-3

當點擊“個人中心”時才會加載about

2-4.png

下一講將講解如何配置全局服務(wù)類。

完!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1. 更新到ionic3 .1 把node_modules/文件夾中的所有依賴刪掉.2 修改package.jso...
    cpu_driver閱讀 14,038評論 20 24
  • Ionic3懶加載實現(xiàn) 為什么使用懶加載?在實際開發(fā)中,越復雜的功能就會占用越多資源,寫越多的代碼,那么打開App...
    舊城城舊閱讀 584評論 0 3
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • 兩周前,發(fā)過一篇文章,叫做《你的深度思考能力,是如何被一步步毀掉的》。 文章發(fā)出來后,收到很多朋友留言:我也想跟你...
    范先生說閱讀 535評論 0 4