Angular built-in指令分為attribute指令和structural指令兩種。

Attribute指令

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

NgClass

動態添加或者刪除html標簽的css類。

例子：

<!-- toggle the "special" class on/off with a property --> <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

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 propertiesthis.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.

總結

以上是生活随笔為你收集整理的Angular的built-in指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。