作者:IonicBlog
链接:https://www.jianshu.com/p/4b07a3c57afe
來源:简书
原因:文章中个别地方有错误,做此记录。
一、新建项目
ionic start ionic3-dress tabs
二、搭建基础框架
此项目主要用到三个tab:首页推荐、优惠精选、个人中心;对应的更改tabs.html代码:
<ion-tabs>
<ion-tab [root]="tab1Root" tabsHideOnSubPages="true" tabTitle="首页推荐" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabsHideOnSubPages="true" tabTitle="优惠精选" tabIcon="megaphone"></ion-tab>
<ion-tab [root]="tab3Root" tabsHideOnSubPages="true" tabTitle="个人中心" tabIcon="person"></ion-tab>
</ion-tabs>
三、运行
ionic serve
四、ionic3懒加载配置
配置懒加载需要以下几个步骤:
1、给需要懒加载的页面配置module.ts;
2、在对应的页面的.ts文件里增加@IonicPage()特性;
3、在app.module.ts移除页面引用;
4、使用懒加载;
1、配置module.ts
依次配置about.module.ts、contact.module.ts、home.module.ts、tabs.module.ts
about.module.ts
import { AboutPage } from './about'; import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; @NgModule({ declarations:[ AboutPage, ], imports:[ IonicPageModule.forChild(AboutPage), ], exports:[ AboutPage, ], entryComponents:[ AboutPage ] }) export class AboutPageModule{}
contact.module.ts
import { ContactPage } from './contact'; import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; @NgModule({ declarations:[ ContactPage, ], imports:[ IonicPageModule.forChild(ContactPage), ], exports:[ ContactPage, ], entryComponents:[ ContactPage, ] }) export class ContactPageModule{}
home.module.ts
import { HomePage } from './home'; import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; @NgModule({ declarations:[ HomePage ], imports:[ IonicPageModule.forChild(HomePage), ], exports:[ HomePage ], entryComponents:[ HomePage ] }) export class HomePageModule{}
tabs.module.ts
import { IonicPageModule } from 'ionic-angular'; import { TabsPage } from './tabs'; import { NgModule } from '@angular/core'; @NgModule({ declarations:[ TabsPage, ], imports:[ IonicPageModule.forChild(TabsPage), ], }) export class TabsPageModule{ }
配置完成后目录如下:
2.增加@IonicPage()
特性
以about.ts为例,在@Component上方�加上@IonicPage特性(行号4),其他需要懒加载的页面也需要配置。
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
当点击个人中心时才会加载about