[聚合文章] Angular内置指令

Angular提供了若干内置指令，如果有使用过AngularJS的经验，更容易理解这些指令。

Angular中内置指令是已经导入过的，可以在组件中直接使用它们。

ngIf

如果需要根据一个条件来决定显示或隐藏一个元素时，可以使用ngIf指令，这个条件由传给指令的表达式的结果决定的。

如果表达式的结果返回的是一个假值，元素会从DOM上移除。

<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="str == 'show'"></div>
<div *ngIf="fun()"></div>

使用过AngularJS的可以理解为ng-if的替代品，但Angular中并没有提供ng-show指令的替代品，可以使用ngStyle或ngClass指令。

ngSwitch

有时候需要根据一个给定的条件来渲染不同的元素。

可能会出现如下情况：

<div class="content">
    <div *ngIf="type == 'a'">show a</div>
    <div *ngIf="type == 'b'">show b</div>
    <div *ngIf="type == 'c'">show c</div>
    <div *ngIf="type != 'a' && type != 'b' && type != 'c'">show null</div>
</div>

当条件不满足需要显示默认值时，代码会变得比较繁琐，如果再增加一种条件，后续判断会更加复杂。

对于这种情况，Angular引入了ngSwitch指令，类似于switch语句效果。

其中：

• ngSwitchCase描述已知结果
• ngSwitchDefault处理其他情况

重写一下上面的情况：

<div class="content" [ngSwitch]="type">
    <div *ngSwitchCase="'a'">show a</div>
    <div *ngSwitchCase="'b'">show b</div>
    <div *ngSwitchCase="'c'">show c</div>
    <div *ngSwitchDefault>show null</div>
</div>

如果想新增一种条件，只要再添加一条ngSwitchCase。

ngSwitchDefault是可选的，如果不添加，在没有匹配到值时不做渲染。

ngSwitchCase可以多次匹配同一个值

<div class="content" [ngSwitch]="type">
    <div *ngSwitchCase="'a'">show a</div>
    <div *ngSwitchCase="'b'">show b</div>
    <div *ngSwitchCase="'c'">show c</div>
    <div *ngSwitchCase="'a'">this is a</div>
    <div *ngSwitchDefault>show null</div>
</div>

当条件满足’a’时显示：

show a
this is a

• ngStyle

  使用ngStyle指令，可以通过Angular表达式给特定的DOM元素设定CSS属性。

以上代码使用ngStyle指令把块级元素背景样式设置成black。

还可以使用键值对设置每个属性：

<div [ngStyle]="{color:'yellow', 'background-color':'black'}">background color</div>

动态设置CSS属性

<input type="text" name="font" value="{{fontSize}}">
<div [style.font-size.px]="fontSize">

ngClass

ngClass指令可以动态设置DOM元素的CSS类。

//css
.text-success {
    color: green;
}

//html
<div [ngClass]="{'text-success': true}">success!</div>

动态设置CSS类

<div [ngClass]="{'text-success': isSuccess}">success!</div>

使用类名列表指定元素添加哪些类名

//css
.black {
    background-color: black;
}
.round {
    border-radius: 15px;
}

//html
<div [ngClass]="['black' , 'round']">black background and round corner</div>

ngFor

ngFor指令用来重复一个给定的DOM元素，每次重复会从数组中取值，是ng-repeat的替代品。

语法：*ngFor=”let item of items”

• let item指定一个用来接收items数组中每个元素的变量
• items表示一个数组

//html
<div *ngFor="let c of cities">{{c}}</div>
//ts
this.cities = ['BeiJing', 'ShangHai'];

获取索引

语法：*ngFor=”let item of items; let i = index”

i为当前数组的索引值。

ngNonBindable

如果想要Angular不去编译页面变量绑定，显示原始内容，需要使用ngNonBindable指令。

总结

Angular的核心指令数量很少，但可以通过组合这些简单指令创建五花八门的应用。