入手方式：

• 需求 -- 先要弄清楚我們做什么？
• 被使用方式 -- 長什么樣子？什么場景被使用？怎么被使用？
• 將每個特性寫成單元測試，然后寫代碼，將這個單元的代碼測試通過后，再進行下一個特性代碼的單元測試。

綁定宿主元素的事件，事件綁定的時候捕捉到這個事件源$event（table指令，這是屬性型指令的重點）。

Angular指令可分為三種

• 組件
• 屬性型指令
• 結構型指令

今天來學習一下屬性型指令。
屬性型指令把行為添加到<u>現有元素上。</u>
屬性型指令用于改變一個 DOM 元素的外觀或行為。

創建一個屬性型指令 -- 初級應用

自己創建屬性型指令的必要條件：

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');
    }
}

• import語句指定了從 Angular 的core庫導入的一些符號。

  • Directive提供@Directive裝飾器功能。
  • ElementRef注入到指令構造函數中。 這樣代碼可以訪問 DOM 元素。
  • Input將數據從綁定表達式傳達到指令中。
  • Renderer讓代碼可以改變 DOM 元素的樣式。

• @Directive裝飾器需要一個 CSS 選擇器(屬性名稱加方括號-[attr])，以便從模板中識別出關聯到這個指令的 HTML。
  指令的選擇器是[myHighlight]，Angular 將會在模板中找到所有帶myHighlight屬性的元素。

• **ElementRef是一個服務，它賦予我們通過它的nativeElement屬性直接訪問 DOM 元素的能力。 **

• Renderer服務允許通過代碼設置元素的樣式。

• 別忘了把這個指令添加到 NgModule 元數據的declarations數組中。

響應用戶引發的事件 -- 高級應用

需求
鼠標懸浮一個元素時，顯示字的背景顏色。

• 檢測用戶的鼠標何時進入和離開這個元素。
• 通過設置和清除高亮色來響應這些操作。

實現
把@HostListener裝飾應用到事件觸發時需調用的方法。

/**
 * 參數1：DOM事件的名字
 * 參數2：注入的事件，常用的是$event
 */
@HostListener('click', ['$event']) onclick(event: MouseEvent) {}

@HostListener('mouseenter') onMouseEnter() {
/* . . . */
}

@HostListener('mouseleave') onMouseLeave() {
/* . . . */
}

• @HostListener裝飾器引用屬性型指令的宿主元素，在這個例子中就是<p>。

• 直接操縱 DOM 元素的方式給宿主 DOM 元素附加一個事件監聽器。
  <u>注意：正確的書寫監聽器，并且還要在指令被銷毀的時候，必須卸掉監聽器，不然會造成內存泄漏。</u>

• 使用數據綁定向指令傳遞值,在定義這個屬性的時候，我們調用了@Input()裝飾器。

@Input('myHighlight') highlightColor: string;  // 屬性 
<p [myHighlight]="color">Highlight me!</p> // 頁面