Angular--Directive

在Angular2中有三種類型的指令（Directive） ，以下：
1. 屬性型指令 - 改變元素顯示和行爲的指令。例如：NgStyle …
2. 結構型指令 － 經過添加和移除DOM元素來改變DOM結構的指令。例如：NgFor, NgIf …
3. 組件 — 擁有模板的指令。

1、屬性指令（ngStyle ，ngClass）

NgStyle
綁定一個有形如CSS屬性名:value的對象，其中value爲具體的css樣式，eg：

<div [ngStyle]="{color: 'white','background-color':'green'}"></<div>

注意，在 ngStyle 的說明中，咱們對 background-color 使用了單引號，但卻沒有對 color 使用。這是爲何呢？由於 ngStyle 的參數是一個JavaScript對象，而color 是一個合法的鍵，不須要引號。可是在 background-color 中，連字符是不容許出如今對象的鍵名當中的，除非它是一個字符串，所以使用了引號。一般狀況下，儘可能不會對對象的鍵使用引號，除非不得不用。

//動態使用

<span [ngStyle]="{color: color}">{{ color }} text</span>

//判斷添加

<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

NgClass
利用NgClass指令，能夠同時添加或移除多個類。NgClass綁定一個有形如CSS類名:value的對象，其中value的值是一個布爾型的值，當value值爲true時，添加對應類型的模板元素，反之則移除。

//基本用法

<div [ngClass]="{bordered: false}">此時div不包含bordered 類名</div>
 <div [ngClass]="{bordered: true}">此時div含有bordered 類名</div>

//判斷

<i [ngClass]="{green: isAddr, red: !isAddr}"></i>

2、結構型指令（ngIf ，ngFor ，ngSwitch）

NgIf
指定綁定一個布爾型的表達式，當表達式返回true時，能夠在DOM樹節點上添加一個元素及其子元素，反之被移除。

若是表達式的結果返回的是一個假值，那麼元素會從DOM上被移除。
下面是一些例子：

<div *ngIf="false"></div> //不顯示
<div *ngIf="a > b"></div>//
<div *ngIf="str == 'yes'"></div> 
<div *ngIf="myFunc()"></div>

NgFor
NgFor指令能夠實現重複執行某些操做來展現數據。NgFor指令支持一個可選的index索引。
它的語法是 *ngFor="let item of items" ：
let item 語法指定一個用來接收 items 數組中每一個元素的（模板）變量。
items 是來自組件控制器的一組項的集合

this.cities = ['廈門', '福州', '漳州'];
<div class="ui list" *ngFor="let c of cities">{{ c }}</div>

獲取索引
在迭代數組時，咱們可能也要獲取每一項的索引。
咱們能夠在 ngFor 指令的值中插入語法 let idx = index 並用分號分隔開，這樣就能夠獲取索引了。

<div class="ui list" *ngFor="let c of cities; let num = index">{{ num+1 }} . {{ c }}</div>

結果以下：
1.廈門
2.福州
3.漳州

ngSwitch
有時候你須要根據一個給定的條件來渲染不一樣的元素。
遇到這種狀況時，你可能會像下面這樣屢次使用 ngIf ：

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">Var is something else</div>
</div>

對於這種狀況，Angular引入了 ngSwitch 指令。

NgSwitch:綁定到一個返回控制條件的值表達式
NgSwitchCase：綁定到一個返回匹配條件的值表達式
NgSwitchDefault:用於標記默認元素的屬性，是可選的。若是咱們不用它，那麼當 myVar 沒有匹配到任何指望的值
時就不會渲染任何東西。
使用ngSwitch 指令來重寫上面的例子：

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchCase="'A'">Var is A</div>
    <div *ngSwitchCase="'B'">Var is B</div>
    <div *ngSwitchCase="'C'">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>

3、組件

屬性型指令的建立至少須要一個帶有@Directive裝飾器修飾的控制器類。@Directive裝飾器指定了一個選擇器名稱，用於指出與此指令相關聯的屬性的名字。

接下來，開始建立一個簡單的屬性型指令，該指令的功能是，user-quotation-view.component.html頁面刷新時獲取.quotation-area的最小高度。

一、首先咱們確認好指令名字，quotationArea

<div class="quotation-area" quotationArea></div>

把這個指令做爲一個屬性應用到一個DOM元素上，也就是咱們須要爲咱們定一個這個指令找到一個宿主元素。
二、以後咱們建立一個quotationArea.directive.tss文件，其代碼結構以下：

import {Component, Directive, ElementRef, OnInit} from '@angular/core';
@Directive({ selector: '[quotationArea]'})
export class QuotationAreaDirective implements OnInit {

  el:ElementRef;
  constructor(el: ElementRef) {
    this.el = el;
  }
  ngOnInit() {
    const $el = $(this.el.nativeElement);
    const windowHeight = document.documentElement.clientHeight; //獲取窗口高度
    const bar=document.getElementsByClassName('bar-nav')[0]
    const barHeight =bar.clientHeight;
    const heightValue=windowHeight - barHeight;
    $el.css('height',(heightValue) + 'px');

  }
}

三、接下來 咱們須要在module.ts中來顯示的聲明咱們本身定義的指令，以便Angualr在解析模板時，可以正確的識別咱們本身定一個指令。

import {QuotationAreaDirective} from './user-quotation/user-quotation-view/quotationArea.directive';
    declarations: [QuotationAreaDirective]

結果如圖:

參考文章：https://blog.csdn.net/shenlei...