1. 說明 Angular2的模板用來顯示組件外觀，作為視圖所用，用法和html語法基本一致，最簡單的Angular2的模板就是一段html代碼。Angular模板語法主要包括以下幾個部分： l 直接綁定 l 插值表達 l 屬性綁定 l 事件綁定 l 雙向綁定 l 樣式綁定 l 模板和 * l 局部 ...

1. 說明

Angular2的模板用來顯示組件外觀，作為視圖所用，用法和html語法基本一致，最簡單的Angular2的模板就是一段html代碼。Angular模板語法主要包括以下幾個部分：

l 直接綁定

l 插值表達

l 屬性綁定

l 事件綁定

l 雙向綁定

l 樣式綁定

l 模板和 *

l 局部變數

首先來看一個模板例子，如下所示：

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'ui-demo',

template: ` <form class="form-horizontal" role="form">

<legend title="form">title</legend>

</div>

<span class="label label-warning">attention：{{msg}}</span>

</div>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>

</div>

</form>`

})

export class TemplateDemoComponent implements OnInit {

msg: string = "註意事項";

name: string = "name";

size: number = 4;

age: number = 15;

sex: string = 'male';

needpwd: boolean = true;

pwd: string = '';

color: string = "red";

isPrimary: boolean = true;

constructor() { }

ngOnInit() { }

change() {

}

show($event) {

console.log($event);

}

1.1 直接綁定

將字元串直接綁定在對應的屬性上，例如將字元串 form 綁定到title屬性上

<legend title="form">title</legend>

1.2 插值表達

插值表達採用{{}}的方式來表示，將組件中對應的表達式的值綁定到模板中進行顯示，例如如下，將msg表達式的值在組件中顯示

<span class="label label-warning">attention：{{msg}}</span>

1.3 屬性綁定

屬性綁定採用[]的方式來表示，將表達式的值綁定在對應的屬性上，例如，將組件中name表達式得值綁定到屬性placeholder 中

</div>

當屬性綁定的元素中存在對應的屬性的時候可以直接採用[xx]進行綁定，但是，當元素上不存在對應的屬性的時候，必須採用[attr.xxx]這樣atrr在加上一個點的方式來綁定對應的屬性信息。

</div>

1.4 樣式綁定

樣式綁定主要包括兩個方便，內聯樣式style及外部樣式class綁定。

1.4.1 Style綁定

style綁定在語法上類似於屬性綁定。但方括弧中的部分不是一個元素的屬性名，而是包括一個 style 首碼，緊跟著一個點 (.) ，再跟著 CSS 樣式的屬性名。表示在指定的元素上使用該屬性，形如： [style.style-perporty]。例如

<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>

</div>

1.4.2 Class綁定

CSS 類綁定在語法上類似於屬性綁定。但方括弧中的部分不是一個元素的屬性名，而是包括一個 class 首碼，緊跟著一個點 (.) ，再跟著 CSS 類的名字組成，形如： [class.class-name]。表示是否在該元素上使用該css類或者移除該css類，後面的值為true的話表使用，false表示移除

<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>

</div>

1.5 * 與 <template>

首先我們來看一個 * 與 <template> 的例子，

</div>

* 是一種語法糖，讓那些需要藉助模板來修改 HTML 佈局的指令更易於讀寫。NgFor、NgIf 和 NgSwitch 都會添加或移除元素子樹，這些元素子樹被包裹在 <template> 標簽中。使用 * 首碼語法讓我們忽略<template>標簽，還原後的代碼如下所示

</div>

</template>

1.6 局部變數

局部變數採用#xxx的方式來表示，在元素上使用該表達式的話則可以使用xxx來代表該元素，可以在同一元素、兄弟元素或任何子元素中使用局部變數。如下所示，可以在兄弟節點使用該變數代表該元素

</div>

1.7 事件綁定

屬性綁定採用()的方式來表示，將組件的方法綁定到對應的事件上，例如，將change函數綁定到change事件中，當change事件發生時會觸發change函數。

</div>

1.8 雙向綁定

雙向綁定使用[()]的方式來表示，雙向綁定是屬性綁定與事件綁定的結合體。最常用的雙向綁定是使用[(ngModel)]=”xxx”在表單中進行使用，修改表單中數據的時候會修改綁定的數據項。如下所示：當表單輸入修改時，sex變數也會同步修改

</div>

Angular2 模板語法

1. 說明

1.1 直接綁定

1.2 插值表達

1.3 屬性綁定

1.4 樣式綁定

1.4.1 Style綁定

1.4.2 Class綁定

1.5 * 與 <template>

1.6 局部變數

1.7 事件綁定

1.8 雙向綁定