Angular4 中常用的指令入门总结

前言

本文主要给大家介绍了关于Angular4 常用指令的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

NgIf

<div *ngIf="false"></div> <!-- never displayed --><div *ngIf="a > b"></div> <!-- displayed if a is more than b --><div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" --><div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个 ngIf 来实现。

<div class="container"> <div *ngIf="myVar == 'A'">Var is A</div> <div *ngIf="myVar == 'B'">Var is B</div> <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div></div>

如果 myVar 的可选值多了一个 'C'，就得相应增加判断逻辑：

<div class="container"> <div *ngIf="myVar == 'A'">Var is A</div> <div *ngIf="myVar == 'B'">Var is B</div> <div *ngIf="myVar == 'C'">Var is C</div> <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'"> Var is something else </div></div>

可以发现 Var is something else 的判断逻辑，会随着 myVar 可选值的新增，变得越来越复杂。遇到这种情景，我们可以使用 ngSwitch 指令。

<div class="container" [ngSwitch]="myVar"> <div *ngSwitchCase="'A'">Var is A</div> <div *ngSwitchCase="'B'">Var is B</div> <div *ngSwitchCase="'C'">Var is C</div> <div *ngSwitchDefault>Var is something else</div></div>

NgStyle

NgStyle 让我们可以方便得通过 Angular 表达式，设置 DOM 元素的 CSS 属性。

1、设置元素的背景颜色

<div [style.background-color="'yellow'"]> Use fixed yellow background</div>

2、设置元素的字体大小

<!-- 支持单位: px | em | %--><div> <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize"> red text </span></div>

NgStyle 支持通过键值对的形式设置 DOM 元素的样式：

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> Uses fixed white text on blue background</div>

注意到 background-color 需要使用单引号，而 color 不需要。这其中的原因是，ng-style 要求的参数是一个 Javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，所以需要添加 ''。

NgClass

NgClass 接收一个对象字面量，对象的 key 是 CSS class 的名称，value 的值是 truthy/falsy 的值，表示是否应用该样式。