第四章:内置指令
-
ngIf
:如果你希望根据一个条件来决定显示或隐藏一个元素,可以使用ngIf
指令。这个条件是由你传给指令的表达式的结果决定的。
如果表达式的结果返回的是一个假值,那么元素会从DOM上被移除。 -
ngSwitch
:对表达式进行一次求值,然后根据其结果来决定如何显示指令类嵌套的元素。
一旦有了结果,我们就可以:- 使用
ngSwitchCase
指令描述已知结果; - 使用ngSwitchDefault指令处理所有其他未知的情况。
<div class="container" [ngSwitch]="myVar"> <div *ngSwitchCase=" 'A' ">Var is A</div> <div *ngSwitchCase=" 'B' ">Var is B</div> <div *ngSwitchDefault>Var is something else</div> </div>
ngSwitchDefault
元素是可选的。如果我们不用它,那么当myVar没有匹配到任何期望的值时不会渲染任何东西。 - 使用
-
ngStyle
:通过Angular表达式给特定的DOM元素设定CSS属性。<div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> Uses fixed white text on blue background </div>
-
ngClass
:动态的设置和改变一个给定DOM元素的CSS类 -
ngFor
:重复一个给定的DOM元素(或一组DOM元素),每次重复都会从数组中取一个不同的值。
他的语法是*ngFor="let item of items"
-
let item
语法指定一个用来接收items
数组中每个元素的(模板)变量。 -
items
是来自组件控制器的一组项的集合。
-
-
ngNonBindable
:告诉Angular不要编译或者绑定页面中的某个特殊部分。