手摸手帶你入門ionic3(六)：界面跳轉

咱們的APP確定不是隻有一個界面，這就須要瞭解ionic的內部導航的用法了。在ionic介紹這一章節提到，ionic實現了適合移動端開發的堆棧式導航系統，經過簡單的push和pop實現界面的跳轉和傳值。ionic中界面分兩種，懶加載界面和非懶加載的，因此這篇咱們分兩個部分來說解，最後會介紹下懶加載界面和非懶加載界面的區別。

仍是使用以前的項目，根目錄下經過ionic serve運行咱們的項目

懶加載界面

根目錄下，經過ionic generate page lazy-load(關於此命令的更多解釋見文章最後)建立一個懶加載界面，會在src/pages目錄下新建一個文件夾，裏面包含四個文件。以下：

── pages
│   ...
│   └── lazy-load
│       ├── lazy-load.html
│       ├── lazy-load.module.ts
│       ├── lazy-load.scss
│       └── lazy-load.ts
複製代碼

下面開始從home頁跳轉到LazyLoad界面，首先在home頁添加button按鈕，並綁定點擊跳轉的事件，代碼以下：

home.html

...
<button  class="btn-primary"  (click)="toLazyLoadPage()">跳轉到懶加載界面</button>
複製代碼

home.ts

...
 toLazyLoadPage() {
    this.navCtrl.push('LazyLoadPage', {
        name: 'ionic',
        age: 18
      });
  }
複製代碼

解釋一下：NavController是ionic導航的核心，它提供了push()操做能夠跳轉並傳值至其餘界面，this.navCtrl.push(page:string,params:object）中第一個參數是懶加載界面的名字，是string類型，第二個是傳給下一個界面的參數，是Object類型。懶加載界面的名字是lazy-load.ts中導出的類的名字。

下面咱們開始在懶加載界面中接收數據，代碼以下（ionic建立界面時自動生成的註釋能夠刪除）：

lazy-load.html

<ion-header>
  <ion-navbar>
    <ion-title>lazy-load</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <p>name:{{name}}</p>
 <p>age:{{age}}</p>
 <button (click)="back()">返回上一界面</button>
</ion-content>
複製代碼

lazy-load.ts

...
export class LazyLoadPage {

  name:string;
  age:number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.name=this.navParams.get('name');
    this.age=this.navParams.get('age');
  }

  back(){
    this.navCtrl.pop();
  }
 ...
}
複製代碼

解釋一下：經過NavParams提供的get方法能夠從上一界面獲取數據，get(param:string)中的param就是上一界面中傳過來的Object中的key，這兒要換成string類型。經過 NavControl.pop() 能夠返回至上一界面。

保存後，項目自動刷新，在首頁點擊按鈕，會發現跳轉失敗invalid link LazyLoadPage，經過ctrl+c終止項目，而後運行ionic serve重啓便可。

效果以下：

非懶加載界面

根目錄下，經過ionic generate page normal-load --no-module（關於此命令行的更多解釋見文章最後）建立一個非懶加載界面，此時會在src文件夾下會增長新的文件夾，此時目錄以下：

.
├── app
├── components
├   ...
├── pages
│   ├── home
│   │   ├── home.html
│   │   ├── home.scss
│   │   └── home.ts
│   ├── lazy-load
│   │   ├── lazy-load.html
│   │   ├── lazy-load.module.ts
│   │   ├── lazy-load.scss
│   │   └── lazy-load.ts
│   └── normal-load
│       ├── normal-load.html
│       ├── normal-load.scss
│       └── normal-load.ts
...
複製代碼

對比能夠發現，非懶加載界面少了一個module.ts文件，除此以外，normal-load.ts的代碼中少了@IonicPage()這個裝飾器。

而後修改app.module.ts中的內容以下：

...
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NormalLoadPage } from '../pages/normal-load/normal-load';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    NormalLoadPage
  ],
 ...
  entryComponents: [
    MyApp,
    HomePage,
    NormalLoadPage
  ],
 ...
})
export class AppModule {}
複製代碼

Note：只要是非懶加載的界面，都須要在app.module.ts中這兩處添加，除非APP很大後使用子模塊，這個是後話了，這裏不考慮此狀況。

下面處理非懶加載界面的跳轉，在home頁添加button按鈕，並綁定點擊跳轉的事件，代碼以下：

home.html
...
<button  class="btn-primary"  (click)="toNormalLoadPage()">跳轉到非懶加載界面</button>
複製代碼

home.ts

import { NormalLoadPage } from '../normal-load/normal-load';
...
toNormalLoadPage(){
    this.navCtrl.push(NormalLoadPage, {
      name: 'handbook',
      age: 20
    });
  }
複製代碼

一樣須要NavController.push()方法這裏須要注意的是NormalLoadComponent是非懶加載界面，而且須要導入，不是string，比較下和跳轉到懶加載界面的區別。

接着處理非懶加載界面，代碼以下：

normal-load.html

<ion-header>
  <ion-navbar>
    <ion-title>normal-load</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>name:{{name}}</p>
  <p>age:{{age}}</p>
</ion-content>
複製代碼

normal-load.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'normal-load',
  templateUrl: 'normal-load.html'
})
export class NormalLoadPage {

  name:string;
  age:number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.name=this.navParams.get('name');
    this.age=this.navParams.get('age');
  }

}
複製代碼

獲取從上一界面傳過來的值的用法和上部分是同樣的，一樣，返回上一界面的方法也是一致的，這裏就再也不贅述了，感興趣的能夠參考上面的用法試一下。 運行一下，效果以下：

解釋

generate命令

生成懶加載和非懶加載界面的時候，咱們用到了ionic提供的命令ionic generate [<type>] [<name>]，熟悉Angular開發的人會以爲很親切，其中type類型有component（組件），directive（指令）， pipe（管道），provider（service），tabs（tabs頁面），page（界面），前三個和Angular中是同樣的概念，provider其實就是service，換了一個叫法而已，後面兩個是ionic特有的類型。更多命令行的用法請參見 commands

Note：建立界面的命令只在根目錄下才起做用，其餘目錄下運行會報錯。另外 lazy-load若是改變成lazy-load-page會發現生成的文件名稱會自動把page去掉，這是ionic默認處理的。

懶加載和非懶加載

App在運行時會首先加載app.module.ts中的內容，假如AppModule須要加載的界面過多，會影響性能，從而影響用戶體驗。特別是在項目很大，界面不少，某些界面不多被點擊進入的狀況下，這就形成了浪費。

ionic3 中貼心的提供了界面懶加載的功能，當用戶點擊跳轉的時候，界面才加載進來，節約了App啓動所需的加載時間和資源。

固然ionic 3也有預加載，具體參見 ionicPage，須要你們本身去研究了。

後記

本人在寫一個ionic入門的教學手冊 ionic3-handbook，還有一個基於真實項目的ionic項目HW-basic，感興趣的能夠看一下。