手摸手带你入门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，感兴趣的能够看一下。