Angular内置指令

Angular2的内置指令可分为通用指令、路由指令、表单指令。

通用指令包含7种，均包含在CommonModule模块中，CommonModule已经包含在了BrowserModule中。

• NgClass
• Ngstyle
• NgIf
• NgFor
• NgSwitch、NgSwitchCase、NgSwitchDefault
• NgTemplateOutlet（不常用）
• NgPlural、NgPluralCase（不常用）

NgClass(属性型指令) : 绑定一个格式为{ CSS类名：boolean } 的对象，true时添加CSS类到模板元素中，反之移除。

1//组件模板中
2<div [ngClass]="classes">
3
4//组件类中
5classes = { highLight: true };
6
7//组件样式中
8.highLight {
9  background: yellow;
10}

NgStyle(属性型指令) : 绑定一个格式为{ 'CSS样式名' : '样式值' } 的对象

1//组件模板中
2<div [ngClass]="classes">
3
4//组件类中
5classes = { 'color': 'red' };     //可以用表达式

NgIf(结构型指令) : 绑定一个布尔类型的表达式，当表达式返回true时，在DOM树节点上添加一个元素及其子元素，反之移除。

<div *ngIf="方法或表达式">.....<div>

NgFor(结构型指令) : 可以实现重复执行某些步骤来展示数据，同时该指令支持一个可选的index索引，在循环迭代过程中，下标范围是 0<=index<数组长度 。

可以使用可选追踪函数NgForTrackBy，下面例子中追踪函数可以让Angular将具有相同id的对象处理成同一个对象，如果检查处同一个对象的属性发生的变化，Angular就会更新DOM元素，反之保留。

1<div *ngFor="let value of values; let i=index; trackBy: trackByValues">{{value}}{{i}}<div>
2//注意trackByValues不要加()
3
4//组件类
5trackByValues(index: number, value: Value) {
6  return value.name;
7}

NgSwitch、NgSwitchCase、NgSwitchDefault : 根据NgSwitch绑定的条件值来进行相关匹配，条件匹配元素保留，不匹配元素则移出模板，没有匹配项会保留NgSwitchDefault项。

1<div [ngSwitch]="条件">
2  <div *ngSwitchCase="case1">...</div>
3  <div *ngSwitchCase="case2">...</div>
4  <div *ngSwitchDefault>...</div>
5</div>

NgTemplateOutlet : 以后再补上...