深入理解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: ` <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>