屬性型指令

• 用于改變一個(gè)DOM元素的外觀或行為。例如，內(nèi)置的NgStyle指令可以同時(shí)修改元素的多個(gè)樣式。

創(chuàng)建屬性型指令

import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }
}

1. Directive 提供@Directive裝飾器功能
2. ElementRef 注入到指令構(gòu)造函數(shù)中，使代碼可以訪問(wèn)DOM元素。
3. Input 就是將數(shù)據(jù)從綁定表達(dá)式傳到指令中。
4. Renderer 讓代碼可以改變DOM元素的樣式。
5. HighlightDirective是指令的控制器類，包括了指令的工作邏輯

PS：屬性指令的@Directive裝飾器需要一個(gè)CSS選擇器，以便從模板中識(shí)別出關(guān)聯(lián)到這個(gè)指令的HTML，CSS 中的attribute選擇器就是屬性名稱加方括號(hào)，如例子中的[myHighlight].

• Angular 會(huì)為每個(gè)匹配的元素創(chuàng)建一個(gè)指令控制器類的實(shí)例，并把 Angular 的ElementRef和Renderer注入進(jìn)構(gòu)造函數(shù)。 ElementRef是一個(gè)服務(wù)，它賦予我們通過(guò)它的nativeElement屬性直接訪問(wèn) DOM 元素的能力。 Renderer服務(wù)允許通過(guò)代碼設(shè)置元素的樣式。

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

<h1>My First Attribute Directive</h1>
<p myHighlight>Highlight me!</p>

• Angular在<p>元素上發(fā)現(xiàn)了一個(gè)myHighlight屬性。然后它創(chuàng)建了一個(gè)HighlightDirective類的實(shí)例，并把所在元素的引用注入到了指令的構(gòu)造函數(shù)。在構(gòu)造函數(shù)中把<p>標(biāo)簽的背景設(shè)置為黃色。當(dāng)然，我們首先要在app.module.ts中引入并注冊(cè)我們的指令。

響應(yīng)用戶引發(fā)事件

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer) { }
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  private highlight(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

• @HostListener裝飾器引用屬性型指令的宿主元素，在這個(gè)例子中就是<p>這里把屬性的處理邏輯委托給了一個(gè)輔助方法，這個(gè)方法會(huì)通過(guò)一個(gè)私有變量el來(lái)設(shè)置顏色，我們要修改構(gòu)造函數(shù)，把ElementRef.nativeElement存進(jìn)這個(gè)私有變量。

使用數(shù)據(jù)綁定向指令傳遞值

• 上面我們看到的高亮顏色使我們?cè)谥噶钪杏簿幋a進(jìn)去的，這種方式讓我們的指令變得沒(méi)有彈性，因此我們并不提倡這種用法，我們可以給支另類增加一個(gè)可綁定的輸入屬性highlightColor,用它來(lái)高亮文本。

export class HighlightDirective {
  private _defaultColor = 'red';

  constructor(private el: ElementRef, private renderer: Renderer) { }
/** 增加一個(gè)可綁定的輸入型指令*/
  @Input('myHighlight') highlightColor: string; 

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this._defaultColor);
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  private highlight(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

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

• 代碼綁定到myHighlight屬性名，但是指令屬性名為highlightColor.

綁定第二個(gè)屬性

• 我們想要設(shè)置一個(gè)默認(rèn)顏色，指導(dǎo)用戶選擇了一個(gè)高亮顏色才會(huì)失效，就需要給HighlightDirective添加第二個(gè)輸入型屬性defaultColor. 這里我們可以在指令中直接通過(guò)set來(lái)實(shí)現(xiàn)。

@Input() set defaultColor(colorName: string){
this._defaultColor = colorName || this._defaultColor;
}

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

• 我們像以前一樣把用戶選擇的顏色綁定到了myHighlight上。 我們還把字符串字面量'violet'綁定到了defaultColor上。