Ionic3新特性--页面懒加载IonicPageModule.forChild(xxxPage),TranslateModule.forChild()

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";
  ...
}

Ionic3新特性--页面懒加载IonicPageModule.forChild(xxxPage),TranslateModule.forChild()

猜你喜欢