Ionic3新特性懒加载

发布时间 2018-5-23 16:03:00 浏览量() 收藏(1)

Ionic3新的懒加载机制给我带来了如下新特性：

避免在每一个使用到某Page的Module或其他Page中重复的import这个类（需要写一堆路径）
允许我们通过字符串key在任何想使用的地方获取某一Page；
通过以上两点让我们的代码更简洁；
懒加载，客户响应度更好，体验更友好的加载，更快的响应。这个是我认为的带来的最好的特性；
让开发过程实时编译更快。

下面我们对比的看看老的方式和新的懒加载方式的实现。

一、老的加载方式实现

首先我们在terminal中通过如下命令创建一个新的Ionic3的应用：

ionic start myApp tabs

这里创建了一个Ionic3的app，来看一下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 { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

每次我们创建一个新的Page，我们需要在app.moudle.ts中添加对应的import和声明。

************

同样，在app.component.ts中，也需要同样的引入：

import { TabsPage } from '../pages/tabs/tabs';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

这里当需要设置rootPage时，也需要通过import来引入对应Page。

************

同样的对于navigation也需要进行导航Page的import：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'})export class HomePage {

  constructor(public navCtrl: NavController) {

  }
  
  ngOnInit() {
    this.navCtrl.push(AboutPage);
  }}

这里我们需要在通过NavController导航前，import AboutPage。

2、新的懒加载方式实现

然后我们通过命令新创建一个page试试：

ionic g page login

E:\myvss\AndroidItem\NewEazyApp\newEazyApp>ionic g page login
[OK] Generated a page named login!

注意：上面的命令要在项目文件夹目录下执行。

执行完成后在pages文件夹下面会新增login页面：

打开pages/login/login.ts 代码如下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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

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

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

}

可以看到与以前创建的Page不同的是，增加了一个@IonicPage装饰器。

并且在同一个文件夹内，我们可以看到还自动生成了一个新的名为LoginPageModule的Module：

pages/login/login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

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

好了，到此为止，就是我们引入一个新的Page所需要做的所有事情，剩下的就是直接使用了，我们简单总结一下一共2步：

创建一个Component，并且通过@IonicPage()装饰器进行装饰；
创建一个Module，在其中引入创建的Page,并且通过IonicPageModule.forChild(LoginPage)在全局中声明这个Page。

好了，我们可以在其他页面中使用了。

*********

我们在pages/home/home.ts中增加如下代码：

goToLogin(){
this.navCtrl.push('login');
}

注意这里，调用的时候也有改变，我们只需要传递一个字符串，这个字符串默认就是Page对应的类名。

然后在pages/home/home.html中增加按钮，通过点击来触发上面的方法：

<button ion-button secondary (click)="goToLogin()">登录</button>

接下来的章节我们会把现有的默认页面也改成懒加载的方式。

总结一下

作为Ionic3推出的最重要的特性，经测试，当前基于3.1.2的最新Ionic CLI已经完全稳定的支持Lazy Loaded Pages，其在解决项目加载慢的同时，也大大的简化了我们代码量。但是还是有一些设计上的问题需要解决，当然设计上的事情，没有银弹，我们还是可以根据具体情况具体的处理。

less code, less imports, less paths to remember: The less, the better!

注意：只能是在基于NavController导航的Page可以实现懒加载，如果作为Component使用（直接在html中使用selector作为标签使用），还是要采用老的加载机制。但是官方依然推荐我们对Component、Pipe等进行模块化处理，后续会继续说明这一点。

广告会让浏览体验不好，可这是网站的唯一收入，请点击下面的百度广告，支持老高的开源行动吧！