Angular 屬性型指令

屬性型指令

使用屬性型指令，可以更改 DOM 元素和 Angular 組件的外觀或行為。

有關(guān)包含本指南中代碼片段的有效示例，請(qǐng)參見(jiàn)現(xiàn)場(chǎng)演練 / 下載范例

建立屬性型指令

本節(jié)將引導(dǎo)你創(chuàng)建“突出顯示”指令，該指令會(huì)將宿主元素的背景色設(shè)置為黃色。

1. 要?jiǎng)?chuàng)建指令，請(qǐng)使用 CLI 命令 ?ng generate directive?。

ng generate directive highlight

CLI 創(chuàng)建 ?src/app/highlight.directive.ts? 以及相應(yīng)的測(cè)試文件 ?src/app/highlight.directive.spec.ts?，并在 ?AppModule ?中聲明此指令類(lèi)。

CLI 生成默認(rèn)的 ?src/app/highlight.directive.ts?，如下所示：

import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() { }
}

?@Directive()? 裝飾器的配置屬性會(huì)指定指令的 CSS 屬性選擇器 ?[appHighlight]?。

2. 從 ?@angular/core? 導(dǎo)入 ?ElementRef?。?ElementRef ?的 ?nativeElement ?屬性會(huì)提供對(duì)宿主 DOM 元素的直接訪問(wèn)權(quán)限。
3. 在指令的 ?constructor()? 中添加 ?ElementRef ?以注入對(duì)宿主 DOM 元素的引用，該元素就是 ?appHighlight ?的作用目標(biāo)。
4. 向 ?HighlightDirective ?類(lèi)中添加邏輯，將背景設(shè)置為黃色

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

指令不支持名稱(chēng)空間。

<p app:Highlight>This is invalid</p>

應(yīng)用屬性型指令

1. 要使用 ?HighlightDirective?，請(qǐng)將 ?<p>? 元素添加到 HTML 模板中，并以偽指令作為屬性。

<p appHighlight>Highlight me!</p>

Angualr 會(huì)創(chuàng)建 ?HighlightDirective ?類(lèi)的實(shí)例，并將 ?<p>? 元素的引用注入到該指令的構(gòu)造函數(shù)中，它會(huì)將 ?<p>? 元素的背景樣式設(shè)置為黃色。

處理用戶事件

本節(jié)會(huì)展示如何檢測(cè)用戶何時(shí)將鼠標(biāo)移入或移出元素以及如何通過(guò)設(shè)置或清除突出顯示顏色來(lái)進(jìn)行響應(yīng)。

1. 從 '@angular/core' 導(dǎo)入 ?HostListener?

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

2. 添加兩個(gè)事件處理程序，它們會(huì)在鼠標(biāo)進(jìn)入或離開(kāi)時(shí)做出響應(yīng)，每個(gè)事件處理程序都帶有 ?@HostListener()? 裝飾器。

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.highlight('');
}

private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

要訂閱本屬性型指令宿主 DOM 元素上的事件（在本例中是 ?<p>?），可以使用 ?@HostListener()? 裝飾器。

處理程序會(huì)委托給一個(gè)輔助方法 ?highlight()?，該方法會(huì)設(shè)置宿主 DOM 元素 ?el ?的顏色。

完整的指令如下：

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

}

當(dāng)指針懸停在 p 元素上時(shí)，背景顏色就會(huì)出現(xiàn)；而當(dāng)指針移出時(shí)，背景顏色就會(huì)消失。

將值傳遞給屬性型指令

本節(jié)將引導(dǎo)你在應(yīng)用 ?HighlightDirective ?時(shí)設(shè)置突出顯示顏色。

1. 在 ?highlight.directive.ts? 中，從 ?@angular/core? 導(dǎo)入 ?Input?。

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

2. 添加一個(gè) ?appHighlight ?的 ?@Input()? 屬性。

@Input() appHighlight = '';

?@Input()? 裝飾器會(huì)將元數(shù)據(jù)添加到此類(lèi)，以便讓該指令的 ?appHighlight ?屬性可用于綁定。

3. 在 ?app.component.ts?，將 ?color ?屬性添加到 ?AppComponent?。

export class AppComponent {
  color = 'yellow';
}

4. 要同時(shí)應(yīng)用指令和顏色，請(qǐng)通過(guò) ?appHighlight ?指令選擇器使用屬性綁定，將其設(shè)置為 ?color?。

<p [appHighlight]="color">Highlight me!</p>

?[appHighlight]? 屬性綁定執(zhí)行兩項(xiàng)任務(wù)：

• 將突出顯示指令應(yīng)用于 ?<p>? 元素
• 通過(guò)屬性綁定設(shè)置指令的突出顯示顏色

通過(guò)用戶輸入來(lái)設(shè)置值

本節(jié)指導(dǎo)你添加單選按鈕，將你選擇的顏色綁定到 ?appHighlight ?指令。

1. 將標(biāo)記添加到 ?app.component.html? 以選擇顏色，如下所示：

<h1>My First Attribute Directive</h1>

<h2>Pick a highlight color</h2>
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>

2. 修改 ?AppComponent.color?，使其沒(méi)有初始值。

export class AppComponent {
  color = '';
}

3. 啟動(dòng)本應(yīng)用的開(kāi)發(fā)服務(wù)器，以驗(yàn)證用戶可以通過(guò)單選按鈕選擇顏色。

綁定到第二個(gè)屬性

本節(jié)將指導(dǎo)你配置應(yīng)用程序，以便開(kāi)發(fā)人員可以設(shè)置默認(rèn)顏色。

1. 將第二個(gè) ?Input()? 屬性 ?defaultColor ?添加到 ?HighlightDirective?。

@Input() defaultColor = '';

2. 修改指令的 ?onMouseEnter?，使其首先嘗試使用 ?highlightColor ?進(jìn)行突出顯示，然后嘗試 ?defaultColor?，如果兩個(gè)屬性都 ?undefined?，則變回 ?red?。

@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'red');
}

3. 若要綁定到 ?AppComponent.color? 并回退為默認(rèn)顏色“紫羅蘭（violet）”，請(qǐng)?zhí)砑右韵?nbsp;HTML。在這里，?defaultColor ?綁定沒(méi)有使用方括號(hào) ?[]?，因?yàn)樗庆o態(tài)的。

<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

與組件一樣，你可以將指令的多個(gè)屬性綁定添加到宿主元素上。

如果沒(méi)有默認(rèn)顏色（defaultColor）綁定，則默認(rèn)為紅色。當(dāng)用戶選擇一種顏色時(shí)，所選的顏色將成為突出顯示的顏色。

通過(guò) NgNonBindable 停用 Angular 處理過(guò)程

要防止在瀏覽器中進(jìn)行表達(dá)式求值，請(qǐng)將 ?ngNonBindable ?添加到宿主元素。?ngNonBindable ?會(huì)停用模板中的插值、指令和綁定。

在下面的示例中，表達(dá)式 ?{{ 1 + 1 }}? 的渲染方式會(huì)和在代碼編輯器的一樣，而不會(huì)顯示 ?2?。

<p>Use ngNonBindable to stop evaluation.</p>
<p ngNonBindable>This should not evaluate: {{ 1 + 1 }}</p>

將 ?ngNonBindable ?應(yīng)用于元素將停止對(duì)該元素的子元素的綁定。但是，?ngNonBindable ?仍然允許指令在應(yīng)用 ?ngNonBindable ?的元素上工作。在以下示例中，?appHighlight ?指令仍處于活躍狀態(tài)，但 Angular 不會(huì)對(duì)表達(dá)式 ?{{ 1 + 1 }}? 求值。

<h3>ngNonBindable with a directive</h3>
<div ngNonBindable [appHighlight]="'yellow'">This should not evaluate: {{ 1 +1 }}, but will highlight yellow.
</div>

如果將 ?ngNonBindable ?應(yīng)用于父元素，則 Angular 會(huì)禁用該元素的子元素的任何插值和綁定，例如屬性綁定或事件綁定。