此學習筆記是參考官網的Attribute Directives

此組件通常是用來改變Element的外觀及行為。

Directives的建置重點如下

• 使用 @Directive 來讓類別擁有Directive的能力

• 在Directive的constructor注入ElementRef，所以可以使用它來操作DOM物件

• 可以使用@Input屬性

官網提供的簡單範例如下，此功能用於如同劃重點一樣高亮文字

使用myHighlight當做attibute directive，

attibute directive 命名重點，不要使用容易撞名的名字例如highlight，也不要用ng當做prefix免得與系統的directive搞混。

// in highlight.directive.ts

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

做完，在app.component.html，就可以使用此Directive

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

如果你的directive還是沒有運作，記得去檢查module的程式碼區塊，把directive加入到declarations

回應操作事件

接下來要為程式碼加入事件。

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
...
@HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

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

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

@HostListener讓你可以訂閱使用此directiveDOM物件的事件，

在這個例子，使用@HostListener('mouseenter')來放置滑鼠進入DOM時的操作

使用@HostListener('mouseleave')來放置滑鼠離開DOM時的操作

綁定@Input屬性將資料傳入directive

如果我們希望color可以使用指定的顏色，而不是程式寫死

我們可以使用@Input屬性 - highlightColor 傳入指定顏色。

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

...
@Input() highlightColor: string;
...
@HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor);
}

但是會發現到要多用一個屬性做傳值，

如果可以的話應該直接使用myHighlight傳入值。

使用@Input別名

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

@Input('myHighlight') highlightColor: string;

多個設定值

我們希望mouseenter時，若沒有指定顏色，就使用自己指定的預設顏色。

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

@Input('myHighlight') highlightColor: string;
@Input() defaultColor: string;
...
@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'yellow');
}

我們可以傳入一個設定值物件，像是jQuery plugin的options觀念一樣

那麼在HTML模版上使用directive的傳入設定就不會落落長。

export class HighlightOptions {
    highlightColor:string;
    defaultColor:string;
    
    constructor(dColor:string = 'yellow',hColor?:string){
        this.highlightColor = hColor;
        this.defaultColor = dColor;
    }
}

in app.component.html

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

in app.component.ts

highlightOptions:HighlightOptions;
...
ngOnChanges(){
    highlightOptions = new HighlightOptions();
}

in highlight.directive.ts

@Input('myHighlight') options: HighlightOptions;
...
@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.options.highlightColor || this.options.defaultColor);
}