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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_32107121/article/details/78453242
配置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();
    });
  }
}

配置完成。
展开阅读全文

没有更多推荐了,返回首页