为了账号安全,请及时绑定邮箱和手机立即绑定

第二节:ionic3探索之路-懒加载

标签:
WebApp

Ionic3懒加载实现

为什么使用懒加载?
在实际开发中,越复杂的功能就会占用越多资源,写越多的代码,那么打开App的时候就需要用更多的时间,因为是同时加载了所有的资源,切换也会使用更多的时间。那么为什么我需要什么才加载什么呢?

未使用懒加载之前:


600

image.png


可以在上图明显的看到三个选项卡布局的App把所有的资源都进行加载了,但是目前我只显示了home这个页面,另外两个页面我不需要立马加载的呀。

好了,问题的抛到这里,下面就进行怎么使用懒加载进行简单的说一下吧。

1.需要知道的几个概念,我不解释,angular学习中有。

  • 组件

  • 装饰器

  • 模块

  1. @IonicPage()装饰器。

  2. 具体操作如下:
    a.为about,contact,home,tabs添加module,代码如下

import {NgModule} from "@angular/core";import {IonicPageModule} from "ionic-angular";import {AboutPage} from "./about";/**
 * Created by 雷洪飞 on 2017/9/25.
 * @function:
 */@NgModule({  imports: [
    IonicPageModule.forChild(AboutPage)
  ],  declarations: [
    AboutPage
  ]
})export class AboutModule {

}

b. 在tabs.ts中去掉对HomaPage,AboutPage,ContactPage的组件引用,更改为字符串,并且还需要在app.component.ts中,对rootPage:any = TabsPage也要设置为字符串.

import { Component } from '@angular/core';import {IonicPage} from "ionic-angular";

@IonicPage()
@Component({  templateUrl: 'tabs.html'})export class TabsPage {  // 去掉组件引用,改为字符串
  tab1Root = 'HomePage';
  tab2Root = 'AboutPage';
  tab3Root = 'ContactPage';  constructor() {

  }
}

c. 添加@IonicPage()特性,在组件中添加(HomePage,ContactPage,AboutPage,TabsPage).

import { Component } from '@angular/core';import {IonicPage, NavController} from 'ionic-angular';//  添加IonicPage特性@IonicPage()
@Component({  selector: 'page-contact',  templateUrl: 'contact.html'})export class ContactPage {  constructor(public navCtrl: NavController) {

  }

}

需要注意的是:不能再app.component.ts中添加该装饰器,否则启动报错。

700

image.png

d. 在app.module中去掉HomePage,AboutPage,ContactPage的declarations申明h和entryComponents中的引用。

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,    // 去掉
    //AboutPage,
    //ContactPage,
    //HomePage,
    //TabsPage
  ],  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],  bootstrap: [IonicApp],  entryComponents: [
    MyApp,    // 去掉
    //AboutPage,
    //ContactPage,
    //HomePage,
    //TabsPage
  ],  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})export class AppModule {}

e. OK了,到此为止懒加载配置完成,启动项目试试吧。

700

image.png

f. 我的项目结构图如下:

700

最后

在使用了懒加载之后,每一个page页面都需要一个module,并且使用到该组件的时候需要使用字符串,而不是组件类型。如上面提到的几个选项卡配置,将组件修改为字符串类型。



作者:旧城城旧
链接:https://www.jianshu.com/p/3c1caba4eb3d


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消