博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular内置指令--通用指令
阅读量:6586 次
发布时间:2019-06-24

本文共 1178 字,大约阅读时间需要 3 分钟。

hot3.png

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 : 以后再补上...

转载于:https://my.oschina.net/u/3412211/blog/896021

你可能感兴趣的文章
【原创】sysbench 使用总结
查看>>
android:theme决定AlertDialog的背景颜色
查看>>
递归练习(C语言)
查看>>
线性表的链式表示和实现
查看>>
由&quot;缓存&quot;到&quot;Memcached分布式缓存&quot;
查看>>
(一四〇)访问控制:protected
查看>>
几个单词
查看>>
关于vue项目本地运行以后,输入本机ip不能访问的问题
查看>>
idea找不到或无法加载主类
查看>>
我人生中的第一场Java面试
查看>>
redux速成法典
查看>>
java灵活传参之builder模式
查看>>
上集: Android开源库大全分类汇总(Android技术资料汇总)
查看>>
个人总结的Vue使用的注意事项
查看>>
iOS面试知识点(一)
查看>>
交易所相继上线BCH合约,意味着什么?
查看>>
阿里云爬虫风险管理产品商业化,为云端流量保驾护航
查看>>
Centos 6更新yum安装源
查看>>
mysql数据库字符集问题
查看>>
我的友情链接
查看>>