ionic3 实现懒加载方式 ---学习记录
2017-11-28 21:43
337 查看
在最初使用ionic的时候,根据教程学习使用ionic搭建一个移动app的时候发现里面的组件全部是使用的全屏加载的方式进行,根据查询相关的资料学习了如何实践ionic3懒加载方式。。。
相关参考资料:
http://www.jianshu.com/p/a445b497cb60
对应的英文文档:
https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit#
以下是我进行的步骤
这是app.component.ts里的内容
分别在home,about,contact文件夹下创建home.module.ts
about.module.ts
contact.module.ts
第二步,在对应的home.ts,about.ts,contact.ts中加入
第三步,将tab.ts中的地址改边一下
这里的HomePage 默认是与组件名称一致的,如果需要修改HomePage,@IonicPage中的name也要对应修改
第四步,删除app.module.ts中的HomePage,AboutPage,ContactPage的相关引用
相关参考资料:
http://www.jianshu.com/p/a445b497cb60
对应的英文文档:
https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit#
以下是我进行的步骤
这是app.component.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 { Http, XHRBackend, RequestOptions, HttpModule} from "@angular/http"; 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), HttpModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}
分别在home,about,contact文件夹下创建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 { }
about.module.ts
import { NgModule } from '@angular/core'; import { AboutPage} from './about'; import { IonicPageModule } from 'ionic-angular'; @NgModule({ declarations: [AboutPage], imports: [IonicPageModule.forChild(AboutPage)], }) export class AboutPageModule { }
contact.module.ts
import { NgModule } from '@angular/core'; import { ContactPage} from './contact'; import { IonicPageModule } from 'ionic-angular'; @NgModule({ declarations: [ContactPage], imports: [IonicPageModule.forChild(ContactPage)], }) export class ContactPageModule { }
第二步,在对应的home.ts,about.ts,contact.ts中加入
import { IonicPage } from 'ionic-angular'; @IonicPage({segment: 'xxx'}) //这里的segment是路由标识 @Component({ --- })
第三步,将tab.ts中的地址改边一下
tab1Root = 'HomePage'; tab2Root = 'AboutPage'; tab3Root = 'ContactPage';
这里的HomePage 默认是与组件名称一致的,如果需要修改HomePage,@IonicPage中的name也要对应修改
第四步,删除app.module.ts中的HomePage,AboutPage,ContactPage的相关引用
相关文章推荐
- Launcher3学习记录-Launcher第一次启动时的快捷方式、Widget加载流程
- ((ios开发学习笔记 十二))Nib加载的方式实现自定义TableView
- MyBatis学习笔记-Spring集成DAO层实现方式记录
- ITCAST视频-Spring学习笔记(使用Spring的注解方式实现AOP入门)
- ITCAST视频-Spring学习笔记(使用Spring的注解方式实现AOP的细节)
- jQuery入门学习二:使用jQuery方式实现异步登录验证
- 通过修改CATALOG记录的方式实现备份集目录变更
- 微软treeview控件异步加载实现方式
- 数据结构学习记录连载10(队列提高要求实现)
- STL学习笔记 ---- 由set的声明所引发的自定义比较的实现方式
- ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)
- EF学习笔记28:如何实现自己的预先加载(Eager Loading)策略
- [EntLib]微软企业库5.0 学习之路——第九步、使用PolicyInjection模块进行AOP—PART4——建立自定义Call Handler实现用户操作日志记录
- SpringJDBC调用存储过程的两种方式(先记录下来,日后在细细研究实现原理)
- 请教.Net平台大型业务系统中“日志记录” 的较好解决办法,类似Java下用AOP方式实现的最好
- 使用JavaScript实现访问本站点任何页面都加载Frame的一种实现方式
- [学习笔记]小型论坛功能——实现按照指定每页的行数来分页显示记录[3]
- 对CTreeCtrl数据加载方式的改进,实现代码的重用
- 数据结构学习记录连载10(队列提高要求实现)
- 关于用Delphi中的Indy控件实现收发邮件的几点学习记录