ionic3开发系列——ionic3懒加载配置

配置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开发系列——ionic3懒加载配置相关推荐

iOS开发UI篇—懒加载
iOS开发UI篇-懒加载 1.懒加载基本懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
iOS开发UI中懒加载的使用方法
1.懒加载基本懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其getter方法.说的通俗一点,就是在开发中,当程序中需要利用的资源时.在程序启动的时候不加载 ...
(0020)iOS 开发之-设计模式-懒加载解惑
提醒:这是苹果公司提倡的做法.其实苹果公司做的IOS系统中很多地方都用到了懒加载的方式,比如控制器的View的创建. 懒加载:也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,其 ...
cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解: cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等 cesium 在线例子内容概览 cesium 实现矢量瓦片加载效果 ...
Spring懒加载机制原理和配置讲解
一.什么是懒加载 Spring默认会在容器初始化的过程中,解析xml或注解,创建配置为单例的bean并保存到一个map中,这样的机制在bean比较少时问题不大,但一旦bean非常多时,spring需要 ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
使用v-lazy图片懒加载插件
图片懒加载效果当我们上网冲浪的时候网络不顺畅,导致图片加载得相对较慢,容易造成页面塌陷的效果,使用图片懒加载插件,当图片没有加载完成的时候显示的是一张我们默认的照片(占位图片),图片加载后会自动替换 ...
14、mybatis多表关联查询 association定义关联对象封装规则及懒加载
文章目录 1.使用association单步查询 1).EmployeeMapper 2).EmployeeMapper.xml 3).Test 2.使用association进行分步查询 4).De ...
关于swift中的懒加载
懒加载在 iOS 开发中,懒加载是无处不在的懒加载的格式如下: lazy var person: Person = {print("懒加载")return Person() } ...

ionic3开发系列——ionic3懒加载配置

ionic3开发系列——ionic3懒加载配置相关推荐

最新文章

热门文章