1.使用命令建立指令    ng  g  d  yourDirectiveName

2.yourDirectiveName.directive.ts程式碼:

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

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

export class HighlightDirective {
  constructor(private el:ElementRef){//此時的el為呼叫該指令的DOM元素
  }  
   @Input() defualtColor:string;
   @Input('appHighlight') color:string; 
}

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

@HostListener('mouseenter') onMouseEnter{
  this.highlight(this.color||this.defualtColor||'red');
}
 

A.

<div appHighlight defualtColor=" red "></div>
<div appHighlight [defaultColor] =" 'red' "></div>

B.

<div    appHighlight="red" ></div>
<div    [appHighlight]=" 'red' " ></div>

C.錯誤寫法

 <div appHighlight color="red"></div>
 <div appHighlight [color]="'red'"></div>

第一種寫法並不會把red傳入color中，因為 @Input( name1 ) color:string;  這裡的變數name1 重新定義了 color的介面形式，即變數color給外部的介面是name1，這種寫法不會報錯，因為這個是attribute的寫法

第二種寫法會直接報錯：Can't bind color since it isn't a known property...  

你的指令沒生效？

你記著設定的declarations陣列了嗎？它很容易被忘掉。

開啟瀏覽器除錯工具的控制檯，會看到像這樣的錯誤資訊：

EXCEPTION: Template parse errors:
  Can't bind to 'appHighlight' since it isn't a known property of 'div'