<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> <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> <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 [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 的值，表示是否应用该样式。
1、CSS Class
.bordered { border: 1px dashed black; background-color: #eee; }
2、HTML
<!-- Use boolean value --> <div [ngClass]="{bordered: false}">This is never bordered</div> <div [ngClass]="{bordered: true}">This is always bordered</div> <!-- Use component instance property --> <div [ngClass]="{bordered: isBordered}"> Using object literal. Border {{ isBordered ? "ON" : "OFF" }} </div> <!-- Class names contains dashes --> <div[ngClass]="{'bordered-box': false}"> Class names contains dashes must use single quote </div> <!-- Use a list of class names --> <div [ngClass]="['blue', 'round']"> This will always have a blue background and round corners </div>
NgFor
NgFor 指令用来根据集合(数组) ，创建 DOM 元素，类似于 ng1 中 ng-repeat 指令
<div *ngFor="let c of cities; let num = index"> <div>{{ num+1 }} - {{ c }}</div> </div>
使用 trackBy 提高列表的性能
@Component({ selector: 'my-app', template: ` <ul> <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li> </ul> <button (click)="getItems()">Refresh items</button> `, }) export class App { constructor() { this.collection = [{id: 1}, {id: 2}, {id: 3}]; } getItems() { this.collection = this.getItemsFromServer(); } getItemsFromServer() { return [{id: 1}, {id: 2}, {id: 3}, {id: 4}]; } trackByFn(index, item) { return index; // or item.id } }
NgNonBindable
ngNonBindable 指令用于告诉 Angular 编译器，无需编译页面中某个特定的HTML代码片段。
<div> <span>{{ content }}</span> <span ngNonBindable> ← This is what {{ content }} rendered </span> </div>
Angular 4.x 新特性
If...Else Template Conditions
语法
<element *ngIf="[condition expression]; else [else template]"></element>
使用示例
<ng-template #hidden> <p>You are not allowed to see our secret</p> </ng-template> <p *ngIf="shown; else hidden"> Our secret is being happy </p>
<template> —> <ng-template>
使用示例