Angular的built-in指令

Angular built-in指令分为attribute指令和structural指令两种。

Attribute指令

最常用的attribute指令有NgClass, NgStyle和NgModel三种。

NgClass

动态添加或者删除html标签的css类。

例子：

<div [ngClass]="isSpecial ? 'special' : ''">This div is specialdiv>

isSpecial为true时，div标签打上special的css类。

一个更复杂一些的例子：

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.div>

div的class绑定到了Component的property，名为currentClasses.

在Component的实现代码里，currentclasses的赋值逻辑：

currentClasses: {};
/* . . . */
  setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses =  {
      saveable: this.canSave,
      modified: !this.isUnchanged,
      special:  this.isSpecial
    };
  }

NgModel

例子：

<label for="example-ngModel">[(ngModel)]:label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">

上面实际上是一个双向绑定的语法糖，等价于：

<label for="without">without NgModel:label>
<input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without">

Structural指令

ngIf

例子：

<div *ngIf="hero" class="name">{{hero.name}}div>

实际是个语法糖，等价于：

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}div>
ng-template>

ngFor

例子：

<app-item-detail *ngFor="let item of items" [item]="item">app-item-detail>

let item of items的含义：Take each item in the items array, store it in the local item looping variable, and make it available to the templated HTML for each iteration.

ngFor指令有一个内置属性index：

<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}div>

上面的例子，将index属性赋给template变量i.