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

往期傳送門
來扯點ionic3[0] 吹完牛再入門也不遲
來扯點ionic3[1] 創建一個新頁面

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

我們先看看手里有幾個頁面？

  • 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 是一個內置指令
讓按鈕在視覺上呈現出與操作系統相符的效果

iOS下按鈕的效果
不加指令的話，額…

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的頁面機制

過往我們在網頁上進行頁面之間的鏈接，是通過<a>標簽來實現的。而我們現在制作的 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中切換時，看到的響應的棧頂頁面。

下一章：來扯點ionic3[3] 頁面的生命周期事件，也就是凡間所說的鉤子

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容