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如何使用呢？咱們接下來看~

一、開始一個blank項目

ionic start startProject blank

二、打開你的編輯器（VSCode）

咱們從blank來實現一個標準的tabs（由於官方默認生成的項目還不是IonicPage，可是命令行是。）

2.一、首先，刪除src/app/pages/home文件夾，而且移除app.module.ts和app.component.ts對它的引用

2.二、ionic g tabs tabs

ionic g tabs tabs

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

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

2.四、導航修改：app.component.ts

將原來的HomePage改爲'TabsPage'便可，注意是字符串格式哦~

三、運行

四、直接新增IonicPage

4.一、ionic g page login

ionic g page login

4.二、一樣 exports: [LoginPage]

4.三、在home頁面設置按鈕和函數導航到login頁面

4.四、運行

五、經過路徑訪問： http://localhost:8100/#/login

這樣是不行的

須要刪除掉中間的