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