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 role="form"><div><legend>title</legend></div><span>attention：{{msg}}</span><div><div>name</div><input type="text" id="name" name="name" [attr.size]="size" [placeholder]="name"></div><div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div><div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex"></div><div *ng-if="needpwd"><div>pwd</div><input #inPwd type="password" [(ngModel)]="pwd" id="pwd" name="pwd"><button type="button" (click)="show(inPwd.value)">warn</button></div><div><div [style.color]="color"><button type="submit" [class.btn-primary]="isPrimary">Submit</button></div></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</legend>
1.2 插值表達
插值表達採用{{}}的方式來表示，將組件中對應的表達式的值綁定到模板中進行顯示，例如如下，將msg表達式的值在組件中顯示
<span>attention：{{msg}}</span>1.3 屬性綁定
屬性綁定採用[]的方式來表示，將表達式的值綁定在對應的屬性上，例如，將組件中name表達式得值綁定到屬性placeholder 中
<div><div>name</div><input type="text" id="name" name="name" [placeholder]="name"></div>
當屬性綁定的元素中存在對應的屬性的時候可以直接採用[xx]進行綁定，但是，當元素上不存在對應的屬性的時候，必須採用[attr.xxx]這樣atrr在加上一個點的方式來綁定對應的屬性信息。
<div><div>name</div><input type="text" id="name" name="name" [attr.size]="size" [placeholder]="name"></div>
1.4 樣式綁定
樣式綁定主要包括兩個方便，內聯樣式style及外部樣式class綁定。
1.4.1 Style綁定
style綁定在語法上類似於屬性綁定。但方括號中的部分不是一個元素的屬性名，而是包括一個style 前綴，緊跟著一個點(.) ，再跟著CSS 樣式的屬性名。表示在指定的元素上使用該屬性，形如： [style.style-perporty]。例如
<div><div [style.color]="color"><button type="submit" [class.btn-primary]="isPrimary">Submit</button></div></div>
1.4.2 Class綁定
CSS 類綁定在語法上類似於屬性綁定。但方括號中的部分不是一個元素的屬性名，而是包括一個class 前綴，緊跟著一個點(.) ，再跟著CSS 類的名字組成，形如： [class.class-name]。表示是否在該元素上使用該css類或者移除該css類，後面的值為true的話表使用，false表示移除
<div><div [style.color]="color"><button type="submit" [class.btn-primary]="isPrimary">Submit</button></div></div>
1.5 * 與<template>
首先我們來看一個* 與<template> 的例子，
<div *ng-if="needpwd"><div>pwd</div><input type="password" [(ngModel)]="pwd" id="pwd" name="pwd"></div>
* 是一種語法糖，讓那些需要藉助模板來修改HTML 佈局的指令更易於讀寫。 NgFor、NgIf 和NgSwitch 都會添加或移除元素子樹，這些元素子樹被包裹在<template> 標籤中。使用* 前綴語法讓我們忽略<template>標籤，還原後的代碼如下所示
<template [ngIf]="needpwd"><div><div>pwd</div><input type="password" [(ngModel)]="pwd" id="pwd" name="pwd"></div></template>
1.6 局部變量
局部變量採用#xxx的方式來表示，在元素上使用該表達式的話則可以使用xxx來代表該元素，可以在同一元素、兄弟元素或任何子元素中使用局部變量。如下所示，可以在兄弟節點使用該變量代表該元素
<div *ng-if="needpwd"><div>pwd</div><input #inPwd type="password" [(ngModel)]="pwd" id="pwd" name="pwd"><button type="button" (click)="show(inPwd.value)">warn</button></div>
1.7 事件綁定
屬性綁定採用()的方式來表示，將組件的方法綁定到對應的事件上，例如，將change函數綁定到change事件中，當change事件發生時會觸發change函數。
<div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div>
1.8 雙向綁定
雙向綁定使用[()]的方式來表示，雙向綁定是屬性綁定與事件綁定的結合體。最常用的雙向綁定是使用[(ngModel)]=”xxx”在表單中進行使用，修改表單中數據的時候會修改綁定的數據項。如下所示：當表單輸入修改時，sex變量也會同步修改
<div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex"></div>
以上所述是小編給大家介紹的Angular2 模板語法的相關知識，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對武林網網站的支持！