手摸手帶你入門ionic3(四)：數據和事件綁定

其實這篇是寫給沒有 Angular 開發經驗的人寫，Angular 涉及的東西不少，不是一篇兩篇就能夠說清楚的，假如想深刻 ionic 開發，必定要會 Angular，有國人翻譯的中文文檔。須要注意的是，Angular 已經更新到 5.x 版本，而 ionic v3.x 一開始仍是基於 Angular 4.x 的，如今已經切換到5.0了，看關於ionic 相關文檔或者博客的時候須要注意一下。

廢話很少說，先來看看須要咱們寫代碼的地方。page/home下就是咱們的主頁相關的代碼，也是咱們整個APP的入口頁。之後建立新的頁面，都要寫在page這個目錄下，這個是項目目錄劃分的規範。

數據綁定

如今先將 home.html 和 home.ts 中的代碼替換成下面的，接着我會解釋。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
     首頁
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <!--數值綁定-->
  <p>{{2+3}}</p>
  <h3>{{title}}</h3>
  <label> 輸入框 <input style="border:1px solid #000000" type="text" [(ngModel)]="title"> </label> 
  
  <!--*ngIf用法-->
  <p *ngIf="isShown">看獲得我</p>
  <p *ngIf="!isShown">看不到我</p>
  <p *ngIf="names.length>0">下面是數組，長度爲{{names.length}}</p>

  <!--*ngFor用法-->
  <ul>
    <li *ngFor="let item of names; index as i">
      {{ i+item }}
    </li>
  </ul>

</ion-content>
複製代碼

home.ts

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

// 裝飾器的用法，意思就是將此文件和home.html綁定了
@Component({selector: 'page-home', templateUrl: 'home.html'})
export class HomePage {

  title : string = '';  // 後面string 表示此變量類型是string
  isShown : boolean = true;
  names : string[] = ['張三', '李四', '王二麻子'];

  constructor(public navCtrl : NavController) {}

}
複製代碼

經過帶有雙花括號{{ }}的插值表達式，能夠將變量的值插入在瀏覽器中，這些都是Angular自動處理的，當這些變量的值發生變化時，Angular就會自動刷新顯示。裏面還能夠運行簡單的計算。

經過ngModel能夠將input輸入框的內容同變量雙向綁定，當輸入框裏的內容發生變化時，變量title的值也會發生變化，反之亦然。

*ngIf 是一個結構性指令，能夠經過簡單的判斷，在DOM中添加或從DOM中移除這個元素，而不是簡單的隱藏或者顯示。

*ngFor 是一個重複器指令，它也是結構性指令，能夠重複多個條目。index 是一個從0開始的索引，表明當前項目在序列中的順序。當列表比較大時，trackBy是一個頗有用的特性，請你們本身探索，我在這裏就不寫了。

事件綁定

用戶操做界面，從而會觸發各類各樣的事件，如何在事件觸發後處理這些事件呢，在上面的代碼中添加下面的代碼：

home.html
...
<ion-content>
...
<button (click)="onChangeTitle()">點擊</button>

</ion-content>
複製代碼

...
export class HomePage {
...
 onChangeTitle(){
    console.log('HomePage');
    this.title="Home";
  }
}
複製代碼

經過雙括號()將事件與處理操做進行綁定，用戶點擊後，會重置變量title的值，input輸入框裏的值也會變化，也證實了以前提到的數據雙向綁定。ngModelChange是input經常使用的指令，還有其餘的命令，你們能夠本身去學習。

經過 ionic serve命令運行項目，界面如圖所示：

Note：須要注意的是html文件中的ion-header標籤及其包裹的內容能夠刪除，可是ion-content標籤必定不能夠刪除，界面佈局寫在裏面，否則界面會變成黑色。

後記

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