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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!