ionic3项目实战教程 - 第2讲 ionic3懒加载配置-阿里云开发者社区

开发者社区> 开发与运维> 正文

ionic3项目实战教程 - 第2讲 ionic3懒加载配置

简介: 配置懒加载需要以下几个步骤: 1.给需要懒加载的页面配置module.ts; 2.在对应页面的.ts文件里增加@IonicPage()特性; 3.在app.

配置懒加载需要以下几个步骤:

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

配置完成后目录如下

img_6841f2e43e0e0f6a3f7d61c534cb2bf9.png
2-1.png

2.增加@IonicPage()特性

以about.ts为例,在@Component上方�加上@IonicPage特性(行号4),其他需要懒加载的页面也需要配置。

img_540249e4a8d1f6b81ac17c1671937fab.png
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

img_2815519951b40c164f9fd8e096bf4f67.png
2-3

当点击“个人中心”时才会加载about

img_dfebbef310d0dc7137dbc41270dd3e66.png
2-4.png

下一讲将讲解如何配置全局服务类。

完!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章