ionic3 懒加载配置及 NgModule详解 (赞)

灰太狼 2022-05-10 03:48 195阅读 0赞

原文出处：[https://www.jianshu.com/p/2c95e0fa4cc6][https_www.jianshu.com_p_2c95e0fa4cc6]  
延伸阅读：[Ionic3新特性--页面懒加载1][Ionic3_--_1]  （实操例子）

## 一）懒加载 ##

Ionic3默认采用懒加载机制，什么是懒加载呢？当我们第一次进入应用，会加载app.module,如果没有采用懒加载，那么app.module里的所有东西都会被加载，很显然这是不太合适的，因为里面的组件和服务我们在第一次进入应用时并没有全部使用，可能只使用了很少的一部分，那么对于比较大型的应用来说，由于页面和其他的服务，指令，管道比较多，就会造成比较用户体验不好的影响。  
这个时候我们需要把应用分为一个个module，各自引入自己用到的东西，不要管别的模块。那么第一次进入应用，就只加载很少的app.module和root page对应的module，当我们进入其他页面的时候，才会去加载相应的module。这样的好处是项目代码结构清晰，易于维护，易于开发，而且第一次加载速度比较快。  
当我们使用Ionic3的CLI来新建页面，默认的会是懒加载的结构，甚至不止页面，所有的component,service,directive都默认的是懒加载。

## 配置ionic3懒加载步骤： ##

### 1.给需要懒加载的页面配置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.在对应页面的.ts文件里增加@IonicPage()特性； ###

以about.ts为例，在@Component上方加上@IonicPage()特性(行号4，注意在上面引用IonicPage(见2行)),其他需要懒加载的页面同样操作配置。

import {Component} from '@angular/core';  
    import {NavController, IonicPage} from 'ionic-angular';  
    
    @IonicPage()  
    @Component({  
        selector: 'page-about',  
        templateUrl: 'about.html'  
    })  
    export class AboutPage {  
    
        constructor(public navCtrl: NavController) {  
        }  
    }

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

将配置过懒加载的页面，在app.module.ts中进行移除引用，移除后的代码如下：

import {HttpModule} from "@angular/http";  
    import {AppService} from "./app.service";  
    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 {AboutPage} from "../pages/about/about";  
    
    import {StatusBar} from '@ionic-native/status-bar';  
    import {SplashScreen} from '@ionic-native/splash-screen';  
    
    @NgModule({  
        declarations: [  
            MyApp  
            //AboutPage  
        ],  
        imports: [  
            BrowserModule,  
            HttpModule,  
            IonicModule.forRoot(MyApp)  
        ],  
        bootstrap: [IonicApp],  
        entryComponents: [  
            MyApp  
            //AboutPage  
        ],  
        providers: [  
            StatusBar,  
            SplashScreen,  
            AppService,  
            {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';  
    //import {TabsPage} from "../pages/tabs/tabs";  
    
    @Component({  
        templateUrl: 'app.html'  
    })  
    export class MyApp {  
        //不需要在顶部进行import导入，只需要将之前的页面名字用引号引起来即可  
        //rootPage:any = TabsPage;  
        rootPage:any = 'TabsPage';  
    
        constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {  
            platform.ready().then(() => {  
                statusBar.styleDefault();  
                splashScreen.hide();  
            });  
        }  
    }

配置完成。  
  
补充：(参考：[Ionic3新特性--页面懒加载1][Ionic3_--_1])  
       如果调用页面时，也由页面的类名改为用字符串  
       例如：  
       this.navCtrl.push(AboutPage);        //之前写法  
       改为：  
       this.navCtrl.push('AboutPage');      //懒加载写法

# 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][https_www.angular.cn_guide_ngmodule-faq] ##

# IonicPage #

## [https://ionicframework.com/docs/api/navigation/IonicPage/][https_ionicframework.com_docs_api_navigation_IonicPage] ##

作者：ISD\_H5开发团队  
链接：https://www.jianshu.com/p/2c95e0fa4cc6  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_www.jianshu.com_p_2c95e0fa4cc6]: https://www.jianshu.com/p/2c95e0fa4cc6
[Ionic3_--_1]: https://www.cnblogs.com/gavin-cn/p/6943584.html
[https_www.angular.cn_guide_ngmodule-faq]: https://link.jianshu.com?t=https%3A%2F%2Fwww.angular.cn%2Fguide%2Fngmodule-faq
[https_ionicframework.com_docs_api_navigation_IonicPage]: https://link.jianshu.com?t=https%3A%2F%2Fionicframework.com%2Fdocs%2Fapi%2Fnavigation%2FIonicPage%2F