深入理解Angular2 模板语法
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:`<formclass="form-horizontal"role="form">
<divclass="form-group">
<legendtitle="form">title</legend>
</div>
<spanclass="labellabel-warning">attention：{{msg}}</span>
<divclass="input-group">
<divclass="input-group-addon">name</div>
<inputtype="text"class="form-control"id="name"name="name"[attr.size]="size"[placeholder]="name">
</div>
<divclass="input-group">
<divclass="input-group-addon">age</div>
<inputtype="text"class="form-control"(change)="change()"id="age"name="age"[placeholder]="age">
</div>
<divclass="input-group">
<divclass="input-group-addon">sex</div>
<inputtype="text"class="form-control"[(ngModel)]="sex"id="sex"name="sex"[placeholder]="sex">
</div>
<divclass="input-group"*ng-if="needpwd">
<divclass="input-group-addon">pwd</div>
<input#inPwdtype="password"class="form-control"[(ngModel)]="pwd"id="pwd"name="pwd">
<buttontype="button"class="btnbtn-warning"(click)="show(inPwd.value)">warn</button>
</div>
<divclass="form-group">
<divclass="col-sm-10col-sm-offset-2"[style.color]="color">
<buttontype="submit"class="btnbtn-primary"[class.btn-primary]="isPrimary">Submit</button>
</div>
</div>
</form>`
})
exportclassTemplateDemoComponentimplementsOnInit{
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属性上
<legendtitle="form">title</legend>
1.2插值表达
插值表达采用{{}}的方式来表示，将组件中对应的表达式的值绑定到模板中进行显示，例如如下，将msg表达式的值在组件中显示
<spanclass="labellabel-warning">attention：{{msg}}</span>
1.3属性绑定
属性绑定采用[]的方式来表示，将表达式的值绑定在对应的属性上，例如，将组件中name表达式得值绑定到属性placeholder中
<divclass="input-group"> <divclass="input-group-addon">name</div> <inputtype="text"class="form-control"id="name"name="name"[placeholder]="name"> </div>
当属性绑定的元素中存在对应的属性的时候可以直接采用[xx]进行绑定，但是，当元素上不存在对应的属性的时候，必须采用[attr.xxx]这样atrr在加上一个点的方式来绑定对应的属性信息。
<divclass="input-group"> <divclass="input-group-addon">name</div> <inputtype="text"class="form-control"id="name"name="name"[attr.size]="size"[placeholder]="name"> </div>
1.4样式绑定
样式绑定主要包括两个方便，内联样式style及外部样式class绑定。
1.4.1Style绑定
style绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个style前缀，紧跟着一个点(.)，再跟着CSS样式的属性名。表示在指定的元素上使用该属性，形如：[style.style-perporty]。例如
<divclass="form-group"> <divclass="col-sm-10col-sm-offset-2"[style.color]="color"> <buttontype="submit"class="btnbtn-primary"[class.btn-primary]="isPrimary">Submit</button> </div> </div>
1.4.2Class绑定
CSS类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个class前缀，紧跟着一个点(.)，再跟着CSS类的名字组成，形如：[class.class-name]。表示是否在该元素上使用该css类或者移除该css类，后面的值为true的话表使用，false表示移除
<divclass="form-group"> <divclass="col-sm-10col-sm-offset-2"[style.color]="color"> <buttontype="submit"class="btnbtn-primary"[class.btn-primary]="isPrimary">Submit</button> </div> </div>
1.5*与<template>
首先我们来看一个*与<template>的例子，
<divclass="input-group"*ng-if="needpwd"> <divclass="input-group-addon">pwd</div> <inputtype="password"class="form-control"[(ngModel)]="pwd"id="pwd"name="pwd"> </div>
*是一种语法糖，让那些需要借助模板来修改HTML布局的指令更易于读写。NgFor、NgIf和NgSwitch都会添加或移除元素子树，这些元素子树被包裹在<template>标签中。使用*前缀语法让我们忽略<template>标签，还原后的代码如下所示
<template[ngIf]="needpwd"> <divclass="input-group"> <divclass="input-group-addon">pwd</div> <inputtype="password"class="form-control"[(ngModel)]="pwd"id="pwd"name="pwd"> </div> </template>
1.6局部变量
局部变量采用#xxx的方式来表示，在元素上使用该表达式的话则可以使用xxx来代表该元素，可以在同一元素、兄弟元素或任何子元素中使用局部变量。如下所示，可以在兄弟节点使用该变量代表该元素
<divclass="input-group"*ng-if="needpwd"> <divclass="input-group-addon">pwd</div> <input#inPwdtype="password"class="form-control"[(ngModel)]="pwd"id="pwd"name="pwd"> <buttontype="button"class="btnbtn-warning"(click)="show(inPwd.value)">warn</button> </div>
1.7事件绑定
属性绑定采用()的方式来表示，将组件的方法绑定到对应的事件上，例如，将change函数绑定到change事件中，当change事件发生时会触发change函数。
<divclass="input-group"> <divclass="input-group-addon">age</div> <inputtype="text"class="form-control"(change)="change()"id="age"name="age"[placeholder]="age"> </div>
1.8双向绑定
双向绑定使用[()]的方式来表示，双向绑定是属性绑定与事件绑定的结合体。最常用的双向绑定是使用[(ngModel)]=”xxx”在表单中进行使用，修改表单中数据的时候会修改绑定的数据项。如下所示：当表单输入修改时，sex变量也会同步修改
<divclass="input-group"> <divclass="input-group-addon">sex</div> <inputtype="text"class="form-control"[(ngModel)]="sex"id="sex"name="sex"[placeholder]="sex"> </div>
以上所述是小编给大家介绍的Angular2模板语法的相关知识，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对毛票票网站的支持！