- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
在前面的章节中,我们介绍了angular6.0的组件、模块、服务、路由、依赖注入等等。本章我们再来介绍一下angular6.0的几个常用指令,以及这些angular指令如何使用。
1:ngIf 【如果为真,就执行;否则不执行】
<div *ngIf="false">hhhh</div> 如果为真,就显示hhhh, 为假就不显示
<div *ngIf="'a' < 'b'">hhhh</div> 如果【字母a小于字母b】,就显示hhhh
<div *ngIf="hero == 'yes'">hhhh</div> 如果变量hero的值=yes 就显示hhhh
2:ngSwitch 【多条判断】:
<div [ngSwitch]="hero">
<li *ngSwitchCase="'a'">hero is a</li> 当等于a时,就显示hero is a
<li *ngSwitchCase="'b'">hero is b</li>
<li *ngSwitchCase="'c'">hero is c</li>
</div>
如果hero=’a’ 就显示hero is a; 如果hero=’b’ 就显示hero is b;
3:ngFor 【循环数据】
<li *ngFor="let v of hero; let num=index"> 循环hero数组
{{num+1}} ---{{v.name}}
</li>
输出结果:let num=index 记录每次循环的序号,从0开始
4:ngStyle 【设置DOM元素的CSS属性】
<li [ngStyle]="{color:'red','font-size':'30px'}" >gaogao</li>
5:ngClass【设置DOM元素的class类】
<li [ngClass]="{'gaogao':false}">gaogao</li>
<li [ngClass]="{'gaogao':ssmay=='a'}">gaogao</li>
ngClass第一个参数为类名称,第二个参数为boolean值【可以是表达式】,
如果为真就添加第一个参数:给元素添加class属性
<li *ngFor="let v of hero; let num=index">
<span [ngClass]="{'show': num==1}">{{num+1}} ---{{v.name}}</span>
</li>
当第2次循环时,就添加class=’show’。
88单号网 一单一用 免费试用 免费单号 快递单号www.88danhaowang.com
很有用,刚好在学angular,谢谢!
angular初学者路过。。。
这个是很有用的啊
很好的文章,收藏了
可以参考一下,比较容易看懂
楼主,牛人呀。高