angular6.0使用教程：angular的常用指令

扫描下面的二维码，“关注”我的百家号。

在前面的章节中，我们介绍了angular6.0的组件、模块、服务、路由、依赖注入等等。本章我们再来介绍一下angular6.0的几个常用指令，以及这些angular指令如何使用。

angular4.0/5.0/6.0视频教程

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’。