[Day05]Angular 2教程:05 模板与绑定－－互动的根本

说明:本系列是30天精通Angular2系列，此教程会第一时间发布在最三方平台，希望给你带来帮助！

本文出自最三方Angular系列教程，转载请注明出处！

先前在说明 Angular2 的架构时有约略提到数据绑定的方式，接著就让我们学学如何写模板 (template) ，如何显示数据和事件绑定。那为什么要学模板的写法呢？以及模板到底可以干吗？我们看到的网站都是 HTML 的显示，但是 HTML 是死的，要做出互动传统上必须靠 JavaScript，但是 JS 控制 HTML

数据绑定小复习

1. Interpolation
2. One Way Binding
3. Two Way Binding
4. Event Binding

概观
语法
在 Anugular 2 中：
One Way Binding：从看到的目标绑定数据来源用的是：

• (target) = "statement"
• on-target = "statement"

One Way Binding：从数据来源绑定看到的目标用的是：

• {{expression}}
• [target] = "expression"
• bind-target = "expression"

Two Way Binding：数据端跟视觉端可以互相绑定用的是：

• [(target)] = "expression"
• bindon-target = "expression"

范例

我们可以再 Component 中宣告自己的标签

1 <!-- Normal HTML --> 2 <div class="special">Mental Model</div> 3 <!-- Wow! A new element! --> 4 <hero-detail></hero-detail>

 Component 中的 isValid 为 false 的时候按钮锁住。
 

1 <!-- Bind button disabled state to `isValid` property --> 2 <button [disabled]="!isValid">Save</button>

可以直接绑定链接

1 <img [src]="imageUrl">

 
 可以绑定特性
 

1 <div [ngClass]="classes">[ngClass] binding to the classes property</div>

 
 绑定 Attribute、class、style

 用途
 
 当我们想针对 HTML 的属性、类别、风格做改变时，透过 Angular 特性 (property) 绑定的方式，可以轻松一据绑定的数据做改变，比方说想要达成按下按钮颜色改变，就可以透过这种方式，比起传统的方式，增加不少便利性。
 
 Attribute binding (属性绑定)
 
 针对 HTML 物件的属性作绑定，可以依据绑定的变量数值变化而改变属性。
 

1 <table border=1> 2   <!--  expression calculates colspan=2 --> 3   <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> 4   5   <tr><td>Five</td><td>Six</td></tr> 6 </table>

Class binding
 当绑定的数值为 true 时显示 class，false 移除 class
 

1 <!-- toggle the "special" class on/off with a property --> 2 <div [class.special]="isSpecial">The class binding is special</div> 3   4 <!-- binding to `class.special` trumps the class attribute --> 5 <div class="special" 6      [class.special]="!isSpecial">This one is not so special</div> 7       8       9  Style binding

 一样的逻辑也可以用在 style
 

1 <button [style.color] = "isSpecial ? 'red': 'green'">Red</button> 2 <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

 事件绑定 (Event binding)
 一般的事件绑定
 tempalte:

1 <button (click)="onSave()">Save</button>

 Component:
 

1 @Component({ 2     ... 3 }) 4 export class AppComponent { 5     onSave(): void{ 6         ... 7     } 8 }

 这种一般的用法，可以拿来做按钮呼叫 API 提交表单等等，不需要做 HTML Element 变化的互动。 也可以是自订的事件绑定，这时候我们用 Angular EventEmitter 我们这样定义触发事件：

1 deleteRequest = new EventEmitter<Hero>(); 2   3 delete() { 4   this.deleteRequest.emit(this.hero); 5 }

模板：

1 <div> 2       ... 3   <button (click)="delete()">Delete</button> 4       ... 5 </div> 6 <hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>

当 delete() 执行，会触发 deleteRequest 产生的 EvevntEmitter 物件制造出 Hero ，接者 <hero-detail> 会跟著 deleteRequest 事件触发的改变而改变。

 数据绑定
 Interpolation
 基本就是在 html template 里面加上 {{]}，中间包住想要显示的变量，而变量则是宣告在 app.component.ts 里面。

 来看看范例：

01 // app.component.ts 02 import {Component} from 'angular2/core'; 03 @Component({ 04   selector: 'my-app', 05   templateUrl: 'app.component.html', 06   styleUrls: ['app.component.css'] 07 }) 08 export class AppComponent { 09   title = 'Tour of Heroes'; 10   myHero = 'Windstorm'; 11 } 12 // app.component.html 13   <h1>{{title}}</h1> 14   <h2>My favorite hero is: {{myHero}}</h2>

 会显示成这样：

 
 因为是在同个 Component，当 Angular 在 Template 中侦测到 {{}} 的时候， Class 里的变量会直接被放到 {{}} 里面。当变量值发生改变时也会跟著更新显示，数值重新渲染显示是发生在与视图相关的某些异步事件之后，例如点击、勾选、呼叫 XHR。
 
 还可以拿来这样用：

1 <!-- "The sum of 1 + 1 is 2" --> 2 <p>The sum of 1 + 1 is {{1 + 1}}</p>

Two Way Binding 顾名思义，就是前后都能彼此控制对方，更白话一点就是程序可以控制显示，显示的地方也可以利用按钮、输入等方式改变量据。
 可能就会长得像这样；

1 <my-sizer [(size)]="fontSizePx"></my-sizer> 2 <div [style.font-size.px]="fontSizePx">Resizable Text</div>

my-sizer 双向绑定，不管是数据来源改变还是接口由使用者改变，而下面的的 div 则会受到改变。 NgModal 当有 Input、Select 的时候
 
 NgModal
 可以有效链接绑定 Component 的数据。 直接来看看范例吧：

1 <div> 2   <h4>Select Account</h4> 3   <select [(ngModel)]="selectedAccount" (ngModelChange)="selectAccount()"> 4     <option *ngFor="let account of accounts" [ngValue]="account">{{account.name}}</option> 5   </select> 6 </div>

*ngFor 会显示 accounts: array 中所有的 account，被选取的选项，透过 [ngValue] 回传值，因为<select> 已经和 [(ngModal)] 绑定，所以 [(ngModal)] 得到 [ngValue] 的值，并和 Component 中的 selectedAccount 做双向绑定。 什么意思呢，就是说你拉下选单选某个选项时候， Component 中的 selectedAccount 也跟著选项改变他的值。
 

本文由 最三方开源平台( http://www.zuisanfang.com/archives/view-2087-1.html)原创，转载请保留版权和链接!