3.5　指令與服務

Angular的指令（Directive）組件與過濾器（Filter）組件的主要使用場景都是在HTML頁面視圖里。這兩種組件與其他Angular組件一樣，都是在代碼模塊Module內定義，只不過它們的實例可以通過Angular框架在解析HTML頁面視圖時自動創建。因為它們都對作用域對象在頁面展現有影響，本節將介紹它們的一些基本知識。

3.5.1　指令是什么

在3.3.2節，我們已經提前接觸體驗過Angular框架內置的指令了。Angular建立了一套完整、可擴展、用來幫助Web應用開發的指令集機制，它使得HTML可以轉變成“特定領域語言（DSL）”，是用來擴展瀏覽器能力的技術之一。在DOM編譯期間，和HTML關聯著的指令會被Angular框架的編譯器檢測到，并且被調用執行。這種機制使得指令可以為DOM指定擴展行為，或者改變HTML原有組件的默認行為。

指令的實質是“當關聯的HTML結構進入編譯階段時應該執行的操作”，它只是一個當編譯器編譯到相關DOM時需要執行的函數，可以被寫在HTML元素的名稱、屬性、CSS類名和注釋里（后兩種形式的指令出現和應用較稀少）。

Angular通過稱為指令屬性來擴展的HTML控件屬性，其屬性名稱帶有前綴ng，它的實質是綁定在DOM元素上的函數。在該函數內部可以操作DOM、調用方法、定義行為、綁定控制器等。當瀏覽器啟動、開始解析HTML時，DOM元素上的指令屬性就會跟其他屬性一樣被解析，也就是說當一個Angular應用啟動，Angular編譯器就會遍歷DOM樹來解析HTML，尋找這些指令屬性函數，在一個DOM元素上找到一個或多個這樣的指令屬性函數，它們就會被收集起來、排序，然后按照優先級順序被執行。Angular應用的動態性和響應能力，都要歸功于指令屬性。比較常見的有：ngIf、ngFor，此外其他的如ngClass、ngStyle、ngSwitch等多個指令。本書將在它們第一次出現的位置結合示例代碼解釋其作用。

3.5.2　指令的使用

指令是Angular框架里最復雜的組件種類，沒有之一。因為指令是Angular里被唯一能操作DOM的組件，并且構成了圖3.1中數據模型與視圖交流互動的橋梁。出于復用和定制的目的，做Angular應用開發將不可避免要碰到定義自己的指令的需要。

【ngFor】像for循環一樣，可以重復的從數組中取值并顯示出來。

     // .ts


     this.userInfo = ['張三', '李四', '王五'];


     // .html


     <div class="ui list" *ngFor="let username of userInfo">
     <div class="item">{{username}}</div>
     </div>

他的語法是*ngFor="let username of userInfo"，其中userInfo是從中取值的數組，username是每次從中取出來的值。然后在這個標簽里面的內容就會重復執行，并通過雙向綁定，將username顯示出來。

【ngIf】根據條件決定是否顯示或隱藏這個元素。

     // .html
     <div *ngIf="false"></div>
     <div *ngIf="a > b"></div>
     <div *ngIf="username == '張三'"></div>
     <div *ngIf="myFunction()"></div>

（1）永遠不會顯示。

（2）當a大于b的時候顯示。

（3）當username等于張三的時候顯示。

（4）根據myFunction()這個函數的返回值，決定是否顯示。

【ngSwitch】防止條件復雜的情況導致過多地使用ngIf。

     // .html


     <div class="container" [ngSwitch]="myAge">
     <div *ngSwitchCase="'10'">age = 10</div>
     <div *ngSwitchCase="'20'">age = 20</div>
     <div *ngSwitchDefault="'18'">age = 18</div>
     </div>

［ngSwitch］先與目標進行綁定，ngSwitchCase列出每個可能性，ngSwitchDefault列出默認值。

【ngStyle】可以使用動態值給特定的DOM元素設定CSS屬性。

         // .ts
         backColor: string = 'red';


         // .html
         <div [style.color]="yellow">
         你好，世界
         </div>
         <div [style.background-color]="backColor">
         你好，世界
         </div>
         <div [style.font-size.px]="20">
         你好，世界
         </div>
         <div [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px':
     '20'}">
         你好，世界
         </div>

（1）直接設置顏色為yellow。

（2）設置背景顏色為backColor，并可以在.ts文件中對backColor的值進行修改。

（3）設置字體大小，需要注意的是只寫font-size會報錯，必須在后面加上.px；當然.em.%都是可以的。

（4）前三種都是只設置一個，寫［ngStyle］可以同時設置多個，使用花括號包住里面的內功。需要注意的是連字符-是不允許出現在對象的鍵名當中的，如果使用background-color等時需要加上單引號。

【ngClass】動態地設置和改變一個給定DOM元素的CSS類。

     // .scss
     .bordered {
     border: 1px dashed black;
     background-color: #eee;
     }


     // .ts
     isBordered: boolean = true;


     // .html
     <div [ngClass]="{bordered: isBordered}">
     是否顯示邊框
     </div>

scss中設置了樣式，相當于你建了一個class="bordered"，ts中新建了一個isBordered，用于判斷是否顯示.scss中的樣式。html中用isBordered作為bordered是否顯示的判斷依據。

【ngNonBindable】告訴Angular不要綁定頁面的某個部分。

     .html


     <divngNonBindable>
         {{我不會被綁定}}
     </div>

使用了ngNonBindable，花括號就會被當作字符串一起顯示出來。