ionic3 实现懒加载方式 ---学习记录

柔情只为你懂 2022-05-11 04:36 212阅读 0赞

原文出处：[https://blog.csdn.net/u012869130/article/details/78659704][https_blog.csdn.net_u012869130_article_details_78659704]

**在最初使用ionic的时候，根据教程学习使用ionic搭建一个移动app的时候发现里面的组件全部是使用的全屏加载的方式进行，根据查询相关的资料学习了如何实践ionic3懒加载方式。。。**

--------------------

*相关参考资料:*  
[http://www.jianshu.com/p/a445b497cb60][http_www.jianshu.com_p_a445b497cb60]  
对应的英文文档：  
[https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj\_SQymFhRS\_nJmiH0K3w/edit\#][https_docs.google.com_document_d_1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w_edit]

--------------------

以下是我进行的步骤  
这是app.component.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 { Http, XHRBackend, RequestOptions, HttpModule} from "@angular/http";
    
    import { AboutPage } from '../pages/about/about';
    import { ContactPage } from '../pages/contact/contact';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';
    
    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';
    
    @NgModule({
      declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage
      ],
      imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
    })
    export class AppModule {}

分别在home，about，contact文件夹下创建home.module.ts

import { NgModule } from '@angular/core';
    import { HomePage} from './home';
    import { IonicPageModule } from 'ionic-angular';
    
    @NgModule({
      declarations: [HomePage],
      imports: [IonicPageModule.forChild(HomePage)],
    })
    export class HomePageModule { }

about.module.ts

import { NgModule } from '@angular/core';
    import { AboutPage} from './about';
    import { IonicPageModule } from 'ionic-angular';
    
    @NgModule({
      declarations: [AboutPage],
      imports: [IonicPageModule.forChild(AboutPage)],
    })
    export class AboutPageModule { }

contact.module.ts

import { NgModule } from '@angular/core';
    import { ContactPage} from './contact';
    import { IonicPageModule } from 'ionic-angular';
    
    @NgModule({
      declarations: [ContactPage],
      imports: [IonicPageModule.forChild(ContactPage)],
    })
    export class ContactPageModule { }

第二步，在对应的home.ts,about.ts,contact.ts中加入

import { IonicPage } from 'ionic-angular';
    
    @IonicPage({segment: 'xxx'}) //这里的segment是路由标识
    @Component({
      ---
    })

第三步，将tab.ts中的地址改边一下

tab1Root = 'HomePage';
     tab2Root = 'AboutPage';
     tab3Root = 'ContactPage';

**这里的HomePage 默认是与组件名称一致的，如果需要修改HomePage,@IonicPage中的name也要对应修改**  
第四步，删除app.module.ts中的HomePage,AboutPage,ContactPage的相关引用

[https_blog.csdn.net_u012869130_article_details_78659704]: https://blog.csdn.net/u012869130/article/details/78659704
[http_www.jianshu.com_p_a445b497cb60]: http://www.jianshu.com/p/a445b497cb60
[https_docs.google.com_document_d_1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w_edit]: https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit#