手摸手带你入门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命令运行项目，界面如图所示： default

Note：需要注意的是html文件中的ion-header标签及其包裹的内容可以删除，但是ion-content标签一定不可以删除，界面布局写在里面，不然界面会变成黑色。

后记

本人在写一个ionic入门的教学手册 ionic3-handbook，还有一个基于真实项目的ionic项目HW-basic，感兴趣的可以看一下。