ng2 内置指令

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.