标签：border can 通讯 转化 normal dom 传递 样式 ext
1. HTML
HTML 是 Angular 模板的"语言"，除了 <script> 元素是被禁用的外 ，其他 HTML 元素都是支持的。
2. 插值表达式
插值表达式的语法格式为：{{ ... }}
插值表达式可以把计算的字符串插入HTML中，也可以作为属性值来使用。
<h3>
{{title}}
<img src="{{imageUrl}}" style="height:30px">
</h3>3. 模板表达式
{{ ... }} 里头其实就是一个模板表达式，Angular 会对其进行求值并转化为字符串输出。
模板表达式类似 JavaScript 的语言，很多 JavaScript 表达式也是合法的模板表达式，但不是全部。
以下 JavaScript 表达式是禁止的：
- 赋值表达式（=，+=，-=...）
- new操作符
- 带有;或者‘的连接表达式
- 自增和自减操作（++和--）
其他与Javascript语法不同的值得注意的包括：
- 不支持位运算符（|和&）
- 模板表达式的操作符，如|和?.等，被赋予了新的含义
4. 属性绑定
模板的属性绑定可以把视图元素的属性设置为模板表达式。
设置元素的属性：<img [src]="imageUrl">
设置指令的属性：<div [ngClass]="classes">[ngClass]绑定到classes 属性</div>
设置一个自定义组件的属性（这是父子组件间通讯的重要途径）：
<user-detail [user]="currentUser"></user-detail>
5. HTML 属性(Attribute)、 class 和 style 绑定
（1）属性绑定
当元素没有属性可绑的时候，使用HTML标签属性(Attribute)绑定。
<table border=1>
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<tr><td>Five</td><td>Six</td></tr>
</table>
（2）CSS类绑定
CSS 类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个 class 前缀，紧跟着一个点 (.) ，再跟着 CSS 类的名字组成。 其中后两部分是可选的。例如： [class.class-name]
<!-- 标准HTML样式类设置 -->
<div class="bad curly special">Bad curly special</div>
<!-- 通过绑定重设或覆盖样式类 -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<!-- 通过一个属性值来添加或移除special样式类 -->
<div [class.special]="isSpecial">这个样式比较特殊</div>
（3）style样式绑定
通过样式绑定，可以设置内联样式。语法：[style.style-property]
<button [style.color] = "isSpecial ? ‘red‘: ‘green‘">红色</button>
<button [style.background-color]="canSave ? ‘cyan‘: ‘grey‘" >保存</button>
<!-- 带有单位的样式绑定 -->
<button [style.font-size.em]="isSpecial ? 3 : 1" >大</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >小</button>
6. 事件绑定
事件绑定的语法是由等号左侧小括号内的 目标事件 和右侧引号中的
模板声明 组成。
注意：左侧圆括号也可以使用on- 前缀的形式。
7. 使用 NgModel 进行双向数据绑定
通过 [(NgModel)]
来实现双向绑定示例：
<input [(ngModel)]="currentUser.firstName">
[]实现了数据流从组件到模板，()实现了数据流从模板到组件，两者一结合[()]就实现了双向绑定。
使用前缀形式的语法：<input bindon-ngModel="currentUser.firstName">
8. 内置指令
Angular 的内置指令有 NgClass、NgStyle、NgIf、NgFor、NgSwitch等。
（1）NgClass
通过绑定到 NgClass 动态添加或删除 CSS 类。
（2）NgStyle
NgStyle 通过把它绑定到一个key:value控制对象的形式，可以让我们同时设置很多内联样式。
setStyles() {
let styles = {
// CSS属性名
‘font-style‘: this.canSave ? ‘italic‘ : ‘normal‘, // italic
‘font-weight‘: !this.isUnchanged ? ‘bold‘ : ‘normal‘, // normal
‘font-size‘: this.isSpecial ? ‘24px‘ : ‘8px‘, // 24px
};
return styles;
}通过添加一个NgStyle属性绑定，让它调用setStyles，并据此来设置元素的样式：
<div [ngStyle]="setStyles()">
这个div的样式是italic, normal weight, 和extra large (24px)。
</div>（3）NgIf
通过把NgIf指令绑定到一个真值表达式，可以把一个元素及其子元素添加到DOM树上。
<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>
（4）NgSwitch
当需要从一组可能的元素树中根据条件显示其中一个时，就需要NgSwitch了。Angular将只把选中的元素添加进DOM中。如：
<span [ngSwitch]="userName">
<span *ngSwitchCase="‘张三‘">张三</span>
<span *ngSwitchCase="‘李四‘">李四</span>
<span *ngSwitchCase="‘王五‘">王五</span>
<span *ngSwitchCase="‘赵六‘">赵六</span>
<span *ngSwitchDefault>龙大</span>
</span>
（5）NgFor
当需要展示一个由多个条目组成的列表时就需要NgFor指令了。
<div *ngFor="let user of users">{{user.fullName}}</div>
ngFor指令支持一个可选的index索引，在迭代过程中会从0增长到数组中的长度。
<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>
（6）NgForTrackBy
ngFor 指令有时候会性能较差，特别是在大型列表中。如对一个条目的一点小更改、移除或添加，都会导致级联的 DOM 操作。
通过追踪函数解决这个问题：
trackByUsers(index: number, user: User){return user.id}
然后把NgForTrackBy指令设置为那个追踪函数：
<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}</div>
追踪函数不会排除所有DOM更改。如果用来判断是否为同一个联系人的属性变化了，就会更新DOM元素，反之就会留下这个DOM元素。列表界面就会变得比较更加平滑，具有更好的响应效果。
9. 模板引用变量
模板引用变量是模板中对 DOM 元素或指令的引用。
<!-- phone 引用了 input 元素，并将 `value` 传递给事件句柄 -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
<!-- fax 引用了 input 元素，并将 `value` 传递给事件句柄 -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>
AngularJS2 模板语法
标签：border can 通讯 转化 normal dom 传递 样式 ext
原文地址：http://blog.csdn.net/zl_best/article/details/55211850
