ng2 内置指令
1.NgClass -- Adds and removes CSS classes on an HTML element.
How To Use
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
Selectors
[ngClass]
Description
The CSS classes are updated as follows, depending on the type of the expression evaluation:
- string the CSS classes listed in the string (space delimited) are added,
- Array the CSS classes declared as Array elements are added,
- Object keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.
2.ng-for TYPE-ALIAS of ng-for-of
How To Use
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
<li template="ngFor let item of items; index as i; trackBy: trackByFn">...</li>
Selectors
[ngFor][ngForOf]
例子：
<p *ngFor="let item of arr
; index as i
; first as isFirst
; last as isLast
; even as isEven
; odd as isOdd">
{{i}} -{{item}}- {{isFirst}}- {{isLast}}- {{isEven}}- {{isOdd}}
</p>
<hr>
<p template="ngFor let item of arr
; index as i
; first as isFirst
; last as isLast
; even as isEven
; odd as isOdd">
{{i}} -{{item}}- {{isFirst}}- {{isLast}}- {{isEven}}- {{isOdd}}
</p>
总结：
- *ngFor 是 template="ngFor 的简化语法
- 访问 index，first，last,even,odd 时需要使用as 语法，或者 ** let i = index **不是很方便
- track by 一般不使用track by的情况下，每次刷新DOM,都会删除原有的元素重新生成DOM结构，而使用track by 后，则可以识别实例与渲染DOM节点间的关联，从而可以利用已有的DOM 元素，不需要整个删除重新渲染。提高了性能。
- 为元素绑定属性 [title]="i"，[attr.data-index]="i" https://angular.io/guide/template-syntax
Usage 1: Track by property of object
*ngFor="let post of posts;trackBy:post?.id"
is what same as angular's 1
ng-repeat="post in posts track by post.id"
Usage 2: Track using your own Function
*ngFor="let post of posts;trackBy:identify"
export class HomeworkAddStudentsPage {
posts:Array<{id:number,data:string}>;
constructor() {
this.posts = [ {id:1,data:'post with id 1'},
{id:2,data:'post with id 2'} ];
}
identify(index,item){
//do what ever logic you need to come up with the unique identifier of your item in loop, I will just return the object id.
return post.id
}
}
is what same as angular's 1
<li ng-repeat="post in posts track by identify($index,post)"></li>
app.controller(function($scope){
$scope.identify = function(index, item) {return item.id};
});
3.NgIf
like condition? true-code : false-code
4.NgStyle --- Update an HTML element styles.
How To Use
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
<some-element [ngStyle]="objExp">...</some-element>
例1.
<div [ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}">
style using ngStyle
</div>
例2.
<div [ngStyle]="{'color': color, 'font-size.px': size, 'font-weight': 'bold'}">
style using ngStyle
</div>
<input [(ngModel)]="color" />
<button (click)="size = size + 1">+</button>
<button (click)="size = size - 1">-</button>
注意：'font-size.px': size 的写法，如果 'font-size': size 则不起作用。
c -- Adds / removes DOM sub-trees when the nest match expressions matches the switch expression.
How To Use
<container-element [ngSwitch]="switch_expression">
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<ng-container *ngSwitchCase="match_expression_3">
<!-- use a ng-container to group multiple root nodes -->
<inner-element></inner-element>
<inner-other-element></inner-other-element>
</ng-container>
<some-element *ngSwitchDefault>...</some-element>
</container-element>
例子：
<button (click)="value=1">select - 1</button>
<button (click)="value=2">select - 2</button>
<button (click)="value=3">select - 3</button>
<h5>You selected : {{value}}</h5>
<hr>
<div [ngSwitch]="value">
<div *ngSwitchCase="1">1. Template - <b>{{value}}</b> </div>
<div *ngSwitchCase="2">2. Template - <b>{{value}}</b> </div>
<div *ngSwitchCase="3">3. Template - <b>{{value}}</b> </div>
<div *ngSwitchDefault>Default Template</div>
</div>
6.NgPlural -- Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.
