美文网首页
使用Ionic3 新特性Lazy Loading加速应用

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

作者: 待花谢花开 | 来源:发表于2017-06-15 08:47 被阅读0次

    因为我们使用命令创建的项目是基于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';

    相关文章

      网友评论

          本文标题:使用Ionic3 新特性Lazy Loading加速应用

          本文链接:https://www.haomeiwen.com/subject/vrryqxtx.html