ionic2入门教程（五）如何使用IonicPage

系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构

如何使用IonicPage

官方：
Ionic and Lazy Loading Pt 1
Ionic and Lazy Loading Pt 2

0、关于IonicPage的优点：我目前体会到的

1.导航方便，不需要手动import pages，app.module.ts就这么简单

2.单个页面可路径访问

（这意味着你需要在一个页面工作时，不需要从根页面花式跳转才能到这个页面）
我的login不是根页面，需要跳转两次，这样的话每次运行起来都很烦，但是IonicPage解决了这个问题，可以采用路径访问。如下：

3.Ionic lazy loading

我们所有用到的pages都采用字符串的形式，类似下面这样

    this.navCtrl.push('LoginPage');

这实际上就是懒加载的行为，如果我们直接使用LoginPage，我们仍然需要在用到这个页面的每一个文件里import它。但是在这里使用字符串，Ionic在内部处理所有东西，并且只在需要时加载它的名称。

这有助于减少加载时间，特别是在启动我们的应用程序时，当然还有很多关于延迟加载和如何改进进程的内容。

那么，IonicPage如何使用呢？我们接下来看~

1、开始一个blank项目

ionic start startProject blank

2、打开你的编辑器（VSCode）

我们从blank来实现一个标准的tabs（因为官方默认生成的项目还不是IonicPage，但是命令行是。）

2.1、首先，删除src/app/pages/home文件夹，并且移除app.module.ts和app.component.ts对它的引用

2.2、ionic g tabs tabs

ionic g tabs tabs

（tabs界面包含三个tab，分别是home、about、contact）

2.3、xxx.module.ts依次添加exports:[XXXPage]

2.4、导航修改：app.component.ts

将原来的HomePage改成'TabsPage'即可，注意是字符串格式哦~

3、运行

4、直接新增IonicPage

4.1、ionic g page login

ionic g page login

4.2、同样 exports: [LoginPage]

4.3、在home页面设置按钮和函数导航到login页面

4.4、运行

5、通过路径访问： http://localhost:8100/#/login

这样是不行的

需要删除掉中间的