來扯點ionic3[2] 頁面一線牽 珍惜這段緣

上一次咱們完成了一個新頁面的建立
可能你被亂七八糟的概念搞得心煩意亂
不過你那麼聰明又那麼好看
我相信你確定花了點時間就把他們搞懂了

咱們先看看手裏有幾個頁面？

• AboutPage
• ContactPage
• HomePage
• TestPage

咱們要作什麼？
在HomePage上放一個頁面，點擊以後跳轉到TestPage.

怎麼作？
可謂很是簡單，只須要完成三步。

1.實踐：喜歡我就點我啊

1.1 開始前：復原上一節的初始狀態

• 文件：pages/tabs/tabs.ts

上一次咱們爲了觀察新建立的TestPage，直愣愣把首屏的HomePage給替換掉了，咱們先把他恢復原狀：

1. 將 tab1Root 從新指向 HomePage
2. 刪除 TestPage 的 import 語句

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

直接serve運行本地服務器，一切又無缺如初，畫面太美不敢看。

1.2 在HomePage搞一個按鈕

• 文件: pages/home/home.html

把原來 ion-content 裏的內容刪除，加入這一個這樣的按鈕

<button ion-button>喜歡我就點我呀</button>

沒錯是你熟悉的那個button標籤
ion-button 是一個內置指令
讓按鈕在視覺上呈現出與操做系統相符的效果

1.3 在HomePage組件中引入TestPage

• 文件: pages/home/home.ts

1. 引入 TestPage
2. 在 HomePage 類中定義 testPage 屬性;
3. 在構造函數中農將 testPage 指向 TestPage，以便模板可使用。

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

import { TestPage } from '../test/test';

@Component({
    selector: 'page-home',
  templateUrl: './home.html'
})
export class HomePage {

  testPage;

  constructor(public navCtrl: NavController) {
      this.testPage=TestPage;
  }

}

1.4 頁面一線牽

• 文件：pages/home/home.html
• 爲button加上 [navPush] 指令

<button ion-button [navPush]="testPage">喜歡我就點我呀</button>

這時咱們切換到瀏覽器，點擊Home頁面上的按鈕，發現頁面流暢地切換到了Test上去了。

2.在業務邏輯中實現跳轉

剛纔，咱們經過了 [navPush] 指令，讓模板中的按鈕「超連接」到了一個新頁面。可是在更復雜的場景中，這樣簡單的連接可能不能符合咱們的需求。好比咱們須要在用戶點擊按鈕時，進行一些業務處理，再跳轉到下一個頁面，這時候就能夠利用NavController中的push方法來實現，一樣也只有三步：

2.1 引入 NavController

ionic把app的衆多交互封裝成了若干個controller，其中NavController就是用來管理和導航頁面的一個controller。因爲幾乎每個頁面都會用到NavController，咱們發如今HomePage中已經有了引入語句了。

import { NavController } from 'ionic-angular';

此外，類的構造函數定義了一個NavController類型的參數，以告訴angular在建立頁面時，須要傳入（注入）一個NavController的實例.

constructor(public navCtrl: NavController){
}

2.2 使用push方法來進行跳轉

在類中編寫一個方法，咱們就叫它pushTestPage吧，調用navCtrl對象的push方法，將頁面導航到TestPage上

pushTestPage(){
      this.navCtrl.push(TestPage);
  }

此時文件 home.ts 的完整代碼

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

import { TestPage } from '../test/test';

@Component({
    selector: 'page-home',
  templateUrl: './home.html'
})
export class HomePage {
  
  constructor(public navCtrl: NavController) {
  }

  pushTestPage(){
      this.navCtrl.push(TestPage);
  }

}

2.3 將方法綁定到按鈕點擊事件

在home.html中，爲button元素綁定click事件

<button ion-button (click)="pushTestPage()">喜歡我就點我呀</button>

爲何不是 onclick="pushTestPage()" 由於 pushTestPage 不是一個全局函數，它是 TestPage 組件中的一個方法，通過封裝以後早已對外不可見，不過能夠經過使用(click) 指令來直接調用組件內的方法。

這樣咱們就能夠在pushTestPage裏添加更加複雜的業務邏輯，以知足咱們的需求。

3.將參數傳遞給下一個頁面

有時咱們完成了一個頁面上的業務以後，要把相關的數據傳給下一個頁面處理，這時候就須要向被push的頁面傳入相關的參數。NavController的push方法的第二個參數接收一個對象。

3.1 爲push函數添加第二個參數

假設咱們要爲TestPage傳入一個標題，用來顯示到頁面上，咱們爲push方法傳入一個對象。

pushTestPage(){
      this.navCtrl.push(TestPage,{
          title:'沒有人能夠比我帥'
      });
  }

3.2 引入NavParam並使用

利用NavParams的get方法，能夠將傳進來的頁面參數讀取出來。
切換到 test.ts，完成三個步驟
1.引入NavParams並，並在構造函數添加註入語句
2.爲TestPage類添加title屬性，讀取參數並賦給title
3.將title輸出到模板中

• 文件 test.ts

import { Component } from '@angular/core'

import { NavParams } from 'ionic-angular' //step1

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string; //step2

    constructor(public params:NavParams){ //step1
        this.title=this.params.get('title'); //step2
    }
}

• 文件 test.html

若是不少場景的模板引擎，在模板中利用雙花括號 {{ }} 將組件的屬性輸出到界面上。

<ion-header>
  <ion-navbar>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <!--[step3]-->
  <h1>{{title}}</h1>
</ion-content>

4. 老司機必會：手動返回

如同進入頁面，咱們在退出頁面的時候，除了用戶點擊返回按鈕外，也有可能在完成了業務以後，自動返回上一個頁面，這時候可使用NavController的pop方法來實現。

• 文件 test.ts

import { Component } from '@angular/core'

//注意這裏
import { NavController, NavParams } from 'ionic-angular'

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string;

    //注意這裏
    constructor(public navCtrl:NavController,public params:NavParams){
        this.title=this.params.get('title');
    }

    //新方法
    popPage(){
        this.navCtrl.pop();
    }
}

• 文件 test.html

在模板中添加返回按鈕

<ion-header>
  <ion-navbar>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <h1>{{title}}</h1>
  <button ion-button (click)="popPage()">返回</button>
</ion-content>

5. 擴展內容：ionic的頁面機制

過往咱們在網頁上進行頁面之間的連接，是經過標籤來實現的。而咱們如今製做的 web APP，雖然使用了前端技術，但頁面的概念跟以前卻全部不一樣。

ionic APP在編譯事後，實際上只有一個index.html網頁，它是一個單頁面應用。你所看到的頁面之間的切換，實際上都是利用 js 來替換界面上的元素，並非傳統意義上的網頁之間的跳轉。由於傳統的網頁跳轉，是須要向服務器發送請求並下載資源的，即使再快的網速都會有必定的響應時間。這在瀏覽器上很是正常，但若是是在手機APP上，這樣的響應時間會嚴重影響操做的流暢性。而單頁面已經加載了基礎的資源，在操做過程當中，只須要替換部分的內容，請求部分的資源，配合一些交互設計，讓操做沒有卡頓感。因此在移動web盛行的今天，單頁面應用也是一種大勢所趨。

ionic APP中的頁面實質上是一個棧的結構（實際上多數原生應用也是這樣的），但從當前頁面上引入一個新頁面時，瀏覽器（或操做系統）會加載新頁面的資源，而後把它添加到棧頂。在界面上的表現就是，新頁面「遮住了」原有的頁面，下層頁面的內容和資源依舊在內存中。

而上層頁面被pop掉的時候，上層頁面彈出棧，相應的內存被釋放（在圖中棧頂由C變成了B），在視覺表現上就是上面的頁面被「移開」了，下層的頁面「暴露了出來」。

因此APP中的頁面是有層級關係的，用戶在首頁一層一層地進入了新頁面（A->B->C），回到首頁時就得一層一層退出來（C->B->A），因此咱們在設計頁面的時候，腦海中有明確這樣的層級關係，若是棧的層次過多了（超過了5層），就會給用戶體驗帶來困擾。

最後提一下TabsPage，TabsPage能夠被理解層一個特殊的頁面，這個頁面中又包含了若干個頁面棧（Tab），每一個頁面棧相互獨立，經過Tab按鈕來相互切換。一個頁面棧中的push和pop不會影響到其它棧的表現，也就是當你在不一樣的tab中切換時，看到的響應的棧頂頁面。