使用Ionic3 新特性Lazy Loading加速应用

最新推荐文章于 2019-02-28 12:33:25 发布

花开花又谢

最新推荐文章于 2019-02-28 12:33:25 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic2 文章标签： ionic2 ionic3 Lazy-Loadi

本文链接：https://blog.csdn.net/u010730897/article/details/70262931

ionic2 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍如何在Ionic 3项目中实现LazyLoading，通过逐步修改Home页面来演示具体操作步骤，包括模块分离、组件配置及深层链接设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为我们使用命令创建的项目是基于ionic2，我们首先要使用ionic3的新特性Lazy Loading就必须对我们的项目进行更改。下面就以修改home页为例。

第一步：

移除app.module.ts中declarations, entryComponents的 HomePage，并移除import { HomePage } from '../pages/home/home'这一项;

第二步:

在home文件夹内新建文件home.module.ts，并在该文件中填入以下代码

import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { IonicPageModule } from 'ionic-angular';

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

第三步：

在home.ts文件中添加@IonicPage装饰器，并导入import { IonicPage } from 'ionic-angular';
如下格式：

...
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
//省略代码
}
...

第四步：

移除tabs.ts文件中的
import { HomePage } from '../pages/home/home'这一项

第五步：

在构建过程中，将生成HomePage组件的深层链接，知道如何处理该字符串。
该字符串实际上是对’@ IonicPage’装饰器的name属性的引用，它默认为类名作为字符串。
如果我们将该名称属性更改为其他内容，我们还需要更新我们在其他地方使用的引用。
所以我们需要修改home.ts文件中的
@IonicPage()为@IonicPage({name:’home’})，
并修改tabs.ts文件中
tab1Root = ‘HomePage’为tab1Root = ‘home’;