入手方式：

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

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

Angular指令可分為三種

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

今天來學習一下屬性型指令。
屬性型指令把行為新增到現有元素上。
屬性型指令用於改變一個 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裝飾應用到事件觸發時需呼叫的方法。

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

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

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

  。

• 直接操縱 DOM 元素的方式給宿主 DOM 元素附加一個事件監聽器。
  注意：正確的書寫監聽器，並且還要在指令被銷燬的時候，必須卸掉監聽器，不然會造成記憶體洩漏。

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

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

寫在後面

GitHub上集大家之力搞了一個前端面試題的專案，裡面都是大家面試時所遇到的題以及一些學習資料，有興趣的話可以關注一下。如果你也有興趣加入我們的話，請在專案中留言。專案同時也可以在gitbook上檢視。

寫在後面

GitHub上集大家之力搞了一個前端面試題的專案，裡面都是大家面試時所遇到的題以及一些學習資料，有興趣的話可以關注一下。如果你也有興趣加入我們的話，請在專案中留言。專案同時也可以在gitbook上檢視。