ionic3学习之懒加载

ionic懒加载

简介

使用懒加载能够减少程序启动时间,减少打包后的体积。并且懒加载是当点击,触发的时候才去加载,所以程序启动的时间比较快。

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

1.给需要懒加载的页面配置module.ts;

2.在对应页面的.ts文件里增加@IonicPage()特性;

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

4.使用懒加载(在调用这个界面的地方,不 import界面,使用 string,组件名称字符串就是懒加载,ionic会帮我们注册组件和找到该组件。)

新增一个组件

使用命令 ionic generate page settings

新增之后的目录

setting
    setting.html
    setting.module.ts
    setting.scss
    setting.ts

配置 setting.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingPage } from './setting';

@NgModule({
  declarations: [
    SettingPage,
  ],
  imports: [
    IonicPageModule.forChild(SettingPage),
  ],
})
export class SettingPageModule {}

配置 setting.ts。需要加入 @IonicPage()

import { Component } from '@angular/core';
import {IonicPage, ModalController, NavController, NavParams} from 'ionic-angular';
import {LoginPage} from "../login/login";
import {ModalPage} from "../modal/modal";

@IonicPage()
@Component({
  selector: 'page-setting',
  templateUrl: 'setting.html',
})
export class SettingPage {

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public modalCtrl: ModalController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingPage');
  }

}

修改 Tab.ts。 将使用 懒加载的模块使用 引号。

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {NavParams, ViewController} from "ionic-angular";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = 'SettingPage';   // 使用懒加载

  constructor(public navParams: NavParams,
              public viewCtrl: ViewController) {
  }

  ionViewDidLoad() {
    console.log(modelData);
  }
}

修改 Tab.html。

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="设置" tabIcon="settings"></ion-tab>
</ion-tabs>

  1. 在第二级的界面中,也是同样的方式。
  2. 查看方式 浏览器中 Sources 中 Network —> http://localhost:8100/ –> src

图片是我自己写的例子改过之后的,上面的文章是刚刚开始做的时候的笔记。 不过代码上面的逻辑是相同的。
进入界面之后,看到的模块
登录进去之后的图片

点击设置之后的模块
点击设置之后的模块

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wayfreem

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值