阅读 832

手摸手带你入门ionic3(四):数据和事件绑定

其实这篇是写给没有 Angular 开发经验的人写,Angular 涉及的东西很多,不是一篇两篇就可以说清楚的,假如想深入 ionic 开发,一定要会 Angular,有国人翻译的中文文档。需要注意的是,Angular 已经更新到 5.x 版本,而 ionic v3.x 一开始还是基于 Angular 4.x 的,现在已经切换到5.0了,看关于ionic 相关文档或者博客的时候需要注意一下。

废话不多说,先来看看需要我们写代码的地方。page/home下就是我们的主页相关的代码,也是我们整个APP的入口页。以后创建新的页面,都要写在page这个目录下,这个是项目目录划分的规范。

数据绑定

现在先将 home.htmlhome.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输入框里的值也会变化,也证明了之前提到的数据双向绑定。ngModelChangeinput常用的指令,还有其他的命令,大家可以自己去学习。

通过 ionic serve命令运行项目,界面如图所示: default

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

后记

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

关注下面的标签,发现更多相似文章
评论