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 = "注意事項(xiàng)";
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 直接綁定

將字符串直接綁定在對(duì)應(yīng)的屬性上，例如將字符串 form 綁定到title屬性上

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

1.2 插值表達(dá)

插值表達(dá)采用{{}}的方式來表示，將組件中對(duì)應(yīng)的表達(dá)式的值綁定到模板中進(jìn)行顯示，例如如下，將msg表達(dá)式的值在組件中顯示

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

1.3 屬性綁定

屬性綁定采用[]的方式來表示，將表達(dá)式的值綁定在對(duì)應(yīng)的屬性上，例如，將組件中name表達(dá)式得值綁定到屬性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>

當(dāng)屬性綁定的元素中存在對(duì)應(yīng)的屬性的時(shí)候可以直接采用[xx]進(jìn)行綁定，但是，當(dāng)元素上不存在對(duì)應(yīng)的屬性的時(shí)候，必須采用[attr.xxx]這樣atrr在加上一個(gè)點(diǎn)的方式來綁定對(duì)應(yīng)的屬性信息。

<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 樣式綁定

樣式綁定主要包括兩個(gè)方便，內(nèi)聯(lián)樣式style及外部樣式class綁定。

1.4.1 Style綁定

style綁定在語法上類似于屬性綁定。但方括號(hào)中的部分不是一個(gè)元素的屬性名，而是包括一個(gè) style 前綴，緊跟著一個(gè)點(diǎn) (.) ，再跟著 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 類綁定在語法上類似于屬性綁定。但方括號(hào)中的部分不是一個(gè)元素的屬性名，而是包括一個(gè) class 前綴，緊跟著一個(gè)點(diǎn) (.) ，再跟著 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>

首先我們來看一個(gè) * 與 <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 都會(huì)添加或移除元素子樹，這些元素子樹被包裹在 <template> 標(biāo)簽中。使用 * 前綴語法讓我們忽略<template>標(biāo)簽，還原后的代碼如下所示

<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的方式來表示，在元素上使用該表達(dá)式的話則可以使用xxx來代表該元素，可以在同一元素、兄弟元素或任何子元素中使用局部變量。如下所示，可以在兄弟節(jié)點(diǎn)使用該變量代表該元素

<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 事件綁定

屬性綁定采用()的方式來表示，將組件的方法綁定到對(duì)應(yīng)的事件上，例如，將change函數(shù)綁定到change事件中，當(dāng)change事件發(fā)生時(shí)會(huì)觸發(fā)change函數(shù)。

<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 雙向綁定

雙向綁定使用[()]的方式來表示，雙向綁定是屬性綁定與事件綁定的結(jié)合體。最常用的雙向綁定是使用[(ngModel)]=”xxx”在表單中進(jìn)行使用，修改表單中數(shù)據(jù)的時(shí)候會(huì)修改綁定的數(shù)據(jù)項(xiàng)。如下所示：當(dāng)表單輸入修改時(shí)，sex變量也會(huì)同步修改

<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 模板語法的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: