版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35624642/article/details/80609450
Ionic3新的懒加载机制给我带来了如下新特性:
- 避免在每一个使用到某
Page
的Module
或其他Page
中重复的import这个类(需要写一堆路径) - 允许我们通过字符串key在任何想使用的地方获取某一Page;
- 通过以上两点让我们的代码更简洁;
- 懒加载,客户响应度更好,体验更友好的加载,更快的响应。这个是我认为的带来的最好的特性;
- 让开发过程实时编译更快。
配置ionic3懒加载步骤:
1.给需要懒加载的页面配置module.ts;
2.在对应页面的.ts文件里增加@IonicPage()特性;在@Component上方加上@IonicPage()特性
3.在app.module.ts移除页面引用;
4.懒加载,不需要在顶部进行import导入,只需要将之前的页面名字用引号引起来即可:
例子:
步骤一:tabs.module.ts
import { NgModule } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; import { IonicPageModule } from 'ionic-angular'; import { TabsPage } from './tabs'; @NgModule({ declarations: [ TabsPage, ], imports: [ IonicPageModule.forChild(TabsPage), TranslateModule.forChild() ], exports: [ TabsPage ] }) export class TabsPageModule { }
步骤二:tabs.ts
import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { IonicPage, NavController } from 'ionic-angular'; import { Tab1Root, Tab2Root, Tab3Root } from '../../'; @IonicPage() @Component({ selector: 'page-tabs', templateUrl: 'tabs.html' }) export class TabsPage { tab1Root: any = Tab1Root; tab2Root: any = Tab2Root; tab3Root: any = Tab3Root; tab1Title = " "; tab2Title = " "; tab3Title = " "; constructor(public navCtrl: NavController, public translateService: TranslateService) { translateService.get(['TAB1_TITLE', 'TAB2_TITLE', 'TAB3_TITLE']).subscribe(values => { this.tab1Title = values['TAB1_TITLE']; this.tab2Title = values['TAB2_TITLE']; this.tab3Title = values['TAB3_TITLE']; }); } }
步骤三:app.component.ts
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { NativeBrowser } from '../providers/common/native-browser'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { IonicStorageModule } from '@ionic/storage'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { Items } from '../mocks/providers/items'; import { User, Api, Prompt } from '../providers'; import { MyApp } from './app.component'; import { ThemeableBrowser } from '@ionic-native/themeable-browser'; import { BackBtnService } from '../providers/common/back-btn-service'; import { BrowserPopover } from '../pages/common/browser/browser-popover'; import { ThemeService } from '../providers/common/theme-service'; import { AppService } from '../providers/common/app-service'; import { ScreenOrientation } from '@ionic-native/screen-orientation'; import { AppVersion } from '@ionic-native/app-version'; import { CacheService } from '../providers/common/cache-service'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { Camera } from '@ionic-native/camera'; // The translate loader needs to know where to load i18n files // in Ionic's static asset pipeline. export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } @NgModule({ declarations: [ MyApp, BrowserPopover ], imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] } }), IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], bootstrap: [IonicApp], entryComponents: [ MyApp, BrowserPopover ], providers: [ Api, Items, User, Camera, SplashScreen, StatusBar, // Keep this to enable Ionic's runtime error handling during development { provide: ErrorHandler, useClass: IonicErrorHandler }, Prompt, NativeBrowser, ThemeableBrowser, BackBtnService, ThemeService, AppService, AppVersion, ScreenOrientation, CacheService ] }) export class AppModule {}步骤四:
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();
});
}
}
app.module.ts
变得非常简洁:
@NgModule({
declarations: [
MyApp
]
...
entryComponents: [
MyApp
]
...
})
相应的路由的位置的类名,为对应的字符串名:app.component.ts
:
export class MyApp {
rootPage:any = "TabsPage";
...
}