angular2系列教程（二）模板語法

今天我們要講的是angualr2的模板語法， 官網 寫的很清楚，但我也用通俗易懂的講法再羅列一下吧！

例子

源代碼

運行方法：

npm install
npm run play

打開8080端口。這個例子是我寫的小demo，介紹了常用的幾種模板語法。

屬性綁定

不需要特別的指令，只需要用[value]就可以了，并不只有value，[]里面可以是任何常用的html元素的屬性！

src/app.html

<input [value]="firstName" [placeholder]="firstNamePlaceholder" />

也可以用雙花括號：

src/app.html

<input value="{{firstName}}" placeholder="{{firstNamePlaceholder}}" />

綁定的屬性從何而來？從我們定義的類中：

src/app.ts

firstName: string = 'lewis';

事件

你可以在angular2中監聽任何html5原生的元素事件，只需要使用這個語法： (eventName)

src/app.html

<button (click)="doSomething($event)" >點擊</button>

doSomething從何而來？跟屬性firstName一樣，在類中定義：

src/app.ts

doSomething($event){
        console.log('點擊了這個按鈕：',$event.target);
    }

雙向數據綁定

剛才講的是單向數據綁定，不信你可以改變input的值看看，別的綁定會不會變動。答案是不會！這次我們來做雙向數據綁定：

src/app.html

<input type="text" [value]="firstName" (input)="firstName=$event.target.value" />
    <input type="text" [(ngModel)]="firstName" />

使用單向綁定加事綁定可以，使用[(ngModel)]也可以！這樣你再改變input的值，所有綁定firstName的值都會跟著變化！

angular2的雙向數據綁定沒有用“臟檢查”，而是用了zone.js。這是個什么庫呢？

用來維持切換上下文的庫。用來替代$apply()的一個庫。告訴你何時更新視圖！

局部變量

局部變量 # 是一個對象或者dom元素的指針，什么意思？看代碼：

src/app.html

<!-- phone refers to the input element; pass its value to an event handler -->
    <input #phone placeholder="phone number">
    <button (click)="callPhone(phone.value)">Call</button>


<!-- fax refers to the input element; pass its `value` to an event handler -->
<input var-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button></pre> 

一切盡在不言中！
 * 語法與template標簽 
先看一個*語法與template標簽的應用：
<p *ngIf="isActive">我是段落</p>
 
 
相當于

<template [ngIf]="isActive"><p>我是段落</p></template>
 
 
這段代碼的意思是，如果isActive為true則渲染p元素。

template標簽聲明了一段 DOM ，這段DOM在runtime后會被實例化。
使用template我們可以將一段DOM包裹起來，聲明它，然后決定要不要渲染他們。不渲染的話，里面的元素就不會加載，可以節省運算。如果你用div和隱藏效果的話，里面的元素還得加載，浪費了運算。
我們也使用*語法替代template標簽。起到同樣的作用。
 用*裝飾的自帶指令還有： NgFor ,    NgIf , 和 NgSwitch。都是控制是否渲染的指令。我們用*來裝飾后，就可以產生類似template的效果！  
 更多語法 
 以上只是介紹了常用的語法，還有更多的語法參考可以直接去 官網 
教程源代碼及目錄
如果您覺得本博客教程幫到了您，就賞顆星吧！
 https://github.com/lewis617/angular2-tutorial 
 </div>