angular2內置指令

摘自ng2-book

1.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 -->

2.NgSwitch

當ngIf判斷條件過於複雜時用它！
ngSwitchDefault，可選。
ngSwitchWhen可重複匹配

<div class="container" [ng-switch]="myVar">
    <div *ngSwitchWhen="A">Var is A</div>
    <div *ngSwitchWhen="B">Var is B</div>
    <div *ngSwitchWhen="C">Var is C</div>
    <div *ngSwitchWhen="C">Var is C, too</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>

3.NgStyle

爲DOM設置css屬性

//方法一
<div [style.background-color]="'yellow'">
    Uses fixed yellow background
</div>

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

//方法三：可動態賦值
<input type="text" name="color" value="{{color}}" #colorinput>
<input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
<span [ngStyle]="{color: colorinput.value}">{{ colorinput.value }} text </span>
<div [style.background-color]="colorinput.value" style="color: white;">
    {{ colorinput.value }} background 
</div>

4.NgClass

//方法一：{key:value},key爲類名，value爲布爾值，表示該類是否啓用
.bordered{
     border: 1px dashed black;
}
<div [ngClass]="{bordered: false}">This is never bordered</div>

//方法二：動態賦值
<div [ngClass]="{bordered: isBordered}">
     This is a div with object literal. Border is {{ isBordered ? "ON" : "OFF"}}
</div>
還有一些方法用時再看

5.NgFor

<div class="ui list" *ngFor="#c of cities；#num = index""> 
  <div class="item">{{num+3}}{{ c }}</div>
</div>
//cities:數組。c:變量.index:索引

6.NgNonBindable

不編譯，渲染純字符串

<span class="pre" ngNonBindable>
    <- This is what {{ content }} rendered </span>
</div>