ionic3 懶加載配置 及 NgModule詳解

一)懶加載

Ionic3默認采用懶加載機制,什么是懶加載呢?當我們第一次進入應用,會加載app.module,如果沒有采用懶加載,那么app.module里的所有東西都會被加載,很顯然這是不太合適的,因為里面的組件和服務我們在第一次進入應用時并沒有全部使用,可能只使用了很少的一部分,那么對于比較大型的應用來說,由于頁面和其他的服務,指令,管道比較多,就會造成比較用戶體驗不好的影響。
這個時候我們需要把應用分為一個個module,各自引入自己用到的東西,不要管別的模塊。那么第一次進入應用,就只加載很少的app.module和root page對應的module,當我們進入其他頁面的時候,才會去加載相應的module。這樣的好處是項目代碼結構清晰,易于維護,易于開發,而且第一次加載速度比較快。
當我們使用Ionic3的CLI來新建頁面,默認的會是懶加載的結構,甚至不止頁面,所有的component,service,directive都默認的是懶加載。

配置ionic3懶加載步驟:

1.給需要懶加載的頁面配置module.ts;

例:配置about.module.ts:

1.  import { NgModule } from '@angular/core';  
2.  import { IonicPageModule } from 'ionic-angular';  
3.  import { AboutPage } from './about';  

5.  @NgModule({  
6.  declarations: [  
7.  AboutPage,  
8.  ],  
9.  imports: [  
10.  IonicPageModule.forChild(AboutPage),  
11.  ],  
12.  })  
13.  export class AboutPageModule { }  

2.在對應頁面的.ts文件里增加@IonicPage()特性;

以about.ts為例,在@Component上方加上@IonicPage()特性(行號4,注意在上面引用IonicPage(見2行)),其他需要懶加載的頁面同樣操作配置。

1.  import {Component} from '@angular/core';  
2.  import {NavController, IonicPage} from 'ionic-angular';  

4.  @IonicPage()  
5.  @Component({  
6.  selector: 'page-about',  
7.  templateUrl: 'about.html'  
8.  })  
9.  export class AboutPage {  

11.  constructor(public navCtrl: NavController) {  
12.  }  
13.  }

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

將配置過懶加載的頁面,在app.module.ts中進行移除引用,移除后的代碼如下:

1.  import {HttpModule} from "@angular/http";  
2.  import {AppService} from "./app.service";  
3.  import {NgModule, ErrorHandler} from '@angular/core';  
4.  import {BrowserModule} from '@angular/platform-browser';  
5.  import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';  
6.  import {MyApp} from './app.component';  
7.  //import {AboutPage} from "../pages/about/about";  

9.  import {StatusBar} from '@ionic-native/status-bar';  
10.  import {SplashScreen} from '@ionic-native/splash-screen';  

12.  @NgModule({  
13.  declarations: [  
14.  MyApp  
15.  //AboutPage  
16.  ],  
17.  imports: [  
18.  BrowserModule,  
19.  HttpModule,  
20.  IonicModule.forRoot(MyApp)  
21.  ],  
22.  bootstrap: [IonicApp],  
23.  entryComponents: [  
24.  MyApp  
25.  //AboutPage  
26.  ],  
27.  providers: [  
28.  StatusBar,  
29.  SplashScreen,  
30.  AppService,  
31.  {provide: ErrorHandler, useClass: IonicErrorHandler}  
32.  ]  
33.  })  
34.  export class AppModule {  
35.  }  

4.使用懶加載;

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

例:app.component.ts代碼段:

1.  import { Component } from '@angular/core';  
2.  import { Platform } from 'ionic-angular';  
3.  import { StatusBar } from '@ionic-native/status-bar';  
4.  import { SplashScreen } from '@ionic-native/splash-screen';  
5.  //import {TabsPage} from "../pages/tabs/tabs";  

7.  @Component({  
8.  templateUrl: 'app.html'  
9.  })  
10.  export class MyApp {  
11.  //不需要在頂部進行import導入,只需要將之前的頁面名字用引號引起來即可  
12.  //rootPage:any = TabsPage;  
13.  rootPage:any = 'TabsPage';  

15.  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {  
16.  platform.ready().then(() => {  
17.  statusBar.styleDefault();  
18.  splashScreen.hide();  
19.  });  
20.  }  
21.  }  

配置完成。

NgModule

 NgModule {
     // providers: 這個選項是一個數組,需要我們列出我們這個模塊的一些需要共用的服務
     //            然后我們就可以在這個模塊的各個組件中通過依賴注入使用了.
    providers : Provider[]
     // declarations: 數組類型的選項, 用來聲明屬于這個模塊的指令,管道等等.
     //               然后我們就可以在這個模塊中使用它們了.
    declarations : Array<Type<any>|any[]>
     // imports: 數組類型的選項,我們的模塊需要依賴的一些其他的模塊,這樣做的目的使我們這個模塊
     //          可以直接使用別的模塊提供的一些指令,組件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 數組類型的選項,我們這個模塊需要導出的一些組件,指令,模塊等;
     //          如果別的模塊導入了我們這個模塊,
     //          那么別的模塊就可以直接使用我們在這里導出的組件,指令模塊等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 數組類型的選項,指定一系列的組件,這些組件將會在這個模塊定義的時候進行編譯
    //                  Angular會為每一個組件創建一個ComponentFactory然后把它存儲在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 數組類型選項, 指定了這個模塊啟動的時候應該啟動的組件.當然這些組件會被自動的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不屬于Angular的組件或者指令的元素或者屬性都需要在這里進行聲明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串類型的選項,模塊的隱藏ID,它可以是一個名字或者一個路徑;用來在getModuleFactory區別模塊,如果這個屬性是undefined
    //     那么這個模塊將不會被注冊.
    id : string
 }

https://www.angular.cn/guide/ngmodule-faq

IonicPage

https://ionicframework.com/docs/api/navigation/IonicPage/

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容