Angular2 指令

本文轉載自查看原文 2016-08-12 16:51 3861 angular2/ typescript

1. 指令說明

Angular2 指令是構成Angular2應用程序的重要組成部分，指令主要用來對模板的標簽或者元素附加一些新的特性或者功能，改變一個 DOM 元素的外觀或行為，Angular2指令和組件十分類似，也有由模塊，注解，元數據以及組件類組成，實際上組件繼承於指令，不同的是指令沒有模板的信息，主要存在兩種類型的指令：

l 結構型指令：會通過添加 / 刪除 DOM 元素來更改 DOM 樹布局

l 屬性型指令：指令改變一個元素的外觀或行為。

2. 結構型指令

結構性指令一般都使用的是內置的結構性指令，常見的內置結構性指令有ngIf，ngFor，ngSwitch等。這三個指令比較常用來改變DOM的結構

名稱	用法	說明
ngIf	<section *ngIf="showSection">	基於showSection表達式的值移除或重新創建部分DOM樹。
ngFor	<li *ngFor="let item of list">	把li元素及其內容轉化成一個模板，並用它來為列表中的每個條目初始化視圖。
ngSwitch ngSwitchWhen ngSwitchDefault	<div [ngSwitch]="conditionExpression"> <template [ngSwitchWhen]="case1Exp">...</template> <template ngSwitchWhen="case2LiteralString">...</template> <template ngSwitchDefault>...</template> </div>	基於conditionExpression的當前值，從內嵌模板中選取一個，有條件的切換div的內容。

3. 屬性型指令

常見的內置屬性型指令有以下幾個，ngModel，ngClass等

名稱	用法	說明
ngModel	<input [(ngModel)]="userName">	提供雙向綁定，為表單控件提供解析和驗證。
ngClass	`<div [ngClass]="{active: isActive, disabled: isDisabled}"></div>`	`把一個元素上CSS類的出現與否，綁定到一個真值映射表上。右側的表達式應該返回類似{class-name: true/false}的映射表。`

4. 自定義指令

指令主要包括模塊，注解，元數據，指令類等幾部分，和組件類似。

我們來實現一個簡單的自定義組件的例子，當鼠標滑過移動到當前元素的時候字體變大移除的時候字體恢復原樣。

4.1 模塊

首先我們引入對應的模塊及函數等

import { Directive, ElementRef, HostListener} from '@angular/core';

4.2 注解

從@angular/core中導入Directive函數后，可以使用@ Directive ()來標示組件類為一個Directive，@標示注解的一種標識，用來普通類附加對應的元數據信息。

4.3 元數據

@Directive將元數據的信息附加到類上，我們來了解一下常用的元數據信息都有哪些：

@Directive({

selector: '[fontIn]',

providers: [PrService]

})

selector：選擇器名稱，在組件使用過程中，充當模板中的標識，類似a標簽中的a。這個屬性信息是必須的，必須精確的指定在模板中所使用的標簽定義，可以為屬性，標簽或者樣式類等，本例子使用屬性型指令的方式，選擇器為fontIn屬性。

providers：服務提供者集合，依賴注入系統的部分，配置了那些新的服務會引入到指令類中進行使用。

4.4 指令類

組件類作為組件的核心代碼區域，包含了組件的邏輯以及視圖的顯示數據信息。

我們要實現對指定的元素的樣式進行修改，當鼠標滑過移動到當前元素的時候字體變大移除的時候字體恢復原樣。

(1). 首先我們在指令類的構造函數中引入ElementRef類，通過依賴注入獲取當前指令所在的元素信息

constructor(elementRef: ElementRef) {

this.element = elementRef.nativeElement;

this.size = this.element.style.fontSize

}

(2). 引入HostListener函數，在該指令的包含元素上附加監聽事件'mouseenter'，'mouseleave’，當鼠標事件觸發是會執行指定的onMouseEnter和onMouseLeave事件。

@HostListener('mouseenter')

onMouseEnter() {

this.setFont(true);

}

@HostListener('mouseleave')

onMouseLeave() {

this.setFont(false);

}

setFont(org: boolean) {

if (org) {

this.element.style.fontSize = "larger";

} else {

this.element.style.fontSize = this.size;

}

最后實現的代碼如下所示：

import { Directive, ElementRef, HostListener} from '@angular/core';

@Directive({

selector: '[fontIn]'

})

export class FontInDirective {

private element: HTMLElement;

private size: string