Angular中的Directive（指令）知道嗎？這裡有angularjs的三種directive指令詳解

本篇文章主要的介紹了關於angularjs中的三種指令類型，分別是哪三種呢，還是讓這篇文章來告訴你吧，還有這三種怎麼使用的都在這裡。現在我們一起來看看吧

在Angular2中有三種型別的指令（Directive） ，如下：
##1 . 屬性型指令- 改變元素顯示和行為的指令。例如：NgStyle …
2. 結構型指令 － 透過新增和移除DOM元素來改變DOM結構的指令。例如：NgFor, NgIf …
3. 元件 — 擁有範本的指令。

一、屬性指令（ngStyle ，ngClass）

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

<p></p><p></p>

注意，在ngStyle 的說明中，我們對background-color 使用了單引號，但卻沒有對color 使用。這是為什麼呢？因為 ngStyle 的參數是JavaScript對象，而color 是一個合法的鍵，不需要引號。但是在 background-color 中，連字符是不允許出現在物件的鍵名當中的，除非它是一個字串，因此使用了引號。通常情況下，盡量不會對物件的鍵使用引號，除非不得不使用。

//動態使用<p></p>

<span>{{ color }} text</span>

//判斷新增<p></p>

<p></p><p></p>

#NgClass利用NgClass指令，可以同時新增或移除多個類。 NgClass綁定一個有形如CSS類別名稱:value的對象，其中value的值是一個布林型的值，當value值為true時，添加對應類型的模板元素，反之則移除。

//基本用法<p></p>

 <p>此时p不包含bordered 类名</p>
 <p>此时p含有bordered 类名</p>

//判斷<p></p>

 <i></i>

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

NgIf指定綁定一個布林型的表達式，當表達式傳回true時，可以在DOM樹節點上新增一個元素及其子元素，反過來被移除。

如果表達式的結果回傳的是一個假值，那麼元素會從DOM移除。

以下是一些範例：

<p></p> //不显示
<p> b"></p>//
<p></p> 
<p></p>

NgForNgFor指令可以實作重複執行某些動作來展示資料。 NgFor指令支援一個可選的index索引。
它的語法是 *ngFor="let item of items" ：
let item 語法指定一個用來接收 items 陣列中每個元素的（模板）變數。
items 是來自元件控制器的一組項目的集合

this.cities = ['厦门', '福州', '漳州'];
<p>{{ c }}</p>

取得索引

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

<p>{{ num+1 }} . {{ c }}</p>

結果如下：

1.廈門
2.福州
3.漳州

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

<p>
    </p><p>Var is A</p>
    <p>Var is B</p>
    <p>Var is C</p>
    <p>Var is something else</p>

對於這種情況，Angular引入了 ngSwitch 指令。 （想看更多就到PHP中文網

AngularJS開發手冊中學習）

#NgSwitch:綁定到一個返回控制條件的值表達式

NgSwitchCase：綁定到一個傳回符合條件的值運算式
NgSwitchDefault:用來標記預設元素的屬性，是可選的。如果我們不用它，那麼當 myVar 沒有符合到任何期望的值
時就不會渲染任何東西。
使用ngSwitch 指令來重寫上面的範例：

<p>
    </p><p>Var is A</p>
    <p>Var is B</p>
    <p>Var is C</p>
    <p>Var is something else</p>

三、元件

屬性型指令的建立至少需要一個帶有@Directive裝飾器修飾的控制器類別。 @Directive裝飾器指定了一個選擇器名稱，用於指出與此指令相關聯的屬性的名字。 <p></p>接下來，開始建立一個簡單的屬性型指令，指令的功能是，user-quotation-view.component.html頁面刷新時取得.quotation-area的最小高度。 <p></p>1、首先我們確認好指令名字，quotationArea<p></p>

<p></p>

把這個指令當作一個屬性應用到一個DOM元素上，也就是我們需要為我們設定一個這個指令找到一個宿主元素。

2、之後我們創建一個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');

  }
}

3、接下來我們需要在module.ts中來顯示的聲明我們自己定義的指令，以便Angualr在解析模板時，能夠正確的辨識我們自己定一個指令。 <p></p>

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

結果如圖:<p></p>

好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問

#

以上是Angular中的Directive（指令）知道嗎？這裡有angularjs的三種directive指令詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！