Angular2的内置指令可分为通用指令、路由指令、表单指令。
通用指令包含7种,均包含在CommonModule模块中,CommonModule已经包含在了BrowserModule中。
- NgClass
- Ngstyle
- NgIf
- NgFor
- NgSwitch、NgSwitchCase、NgSwitchDefault
- NgTemplateOutlet(不常用)
- NgPlural、NgPluralCase(不常用)
NgClass(属性型指令) : 绑定一个格式为{ CSS类名:boolean } 的对象,true时添加CSS类到模板元素中,反之移除。
//组件模板中//组件类中classes = { highLight: true };//组件样式中.highLight { background: yellow;}
NgStyle(属性型指令) : 绑定一个格式为{ 'CSS样式名' : '样式值' } 的对象
//组件模板中//组件类中classes = { 'color': 'red' }; //可以用表达式
NgIf(结构型指令) : 绑定一个布尔类型的表达式,当表达式返回true时,在DOM树节点上添加一个元素及其子元素,反之移除。
.....
NgFor(结构型指令) : 可以实现重复执行某些步骤来展示数据,同时该指令支持一个可选的index索引,在循环迭代过程中,下标范围是 0<=index<数组长度 。
可以使用可选追踪函数NgForTrackBy,下面例子中追踪函数可以让Angular将具有相同id的对象处理成同一个对象,如果检查处同一个对象的属性发生的变化,Angular就会更新DOM元素,反之保留。
{ {value}}{ {i}}//注意trackByValues不要加()//组件类trackByValues(index: number, value: Value) { return value.name;}
NgSwitch、NgSwitchCase、NgSwitchDefault : 根据NgSwitch绑定的条件值来进行相关匹配,条件匹配元素保留,不匹配元素则移出模板,没有匹配项会保留NgSwitchDefault项。
.........
NgTemplateOutlet : 以后再补上...