## 創建一個屬性型指令 屬性型指令至少需要一個帶有`@[Directive]`裝飾器的控制器類。該裝飾器指定了一個用于標識屬性的選擇器。 控制器類實現了指令需要的指令行為。 ### 一、創建指令類 >[info] 在CLI輸入命令：ng g directive highlight (指令類名) 輸入命令后創建的指令類 `src/app/highlight.directive.ts` ``` import { Directive } from '@angular/core'; @Directive({ selector: '[appHighlight]' //屬性指令的名稱,使用前綴避免與內部指令沖突 }) export class HighlightDirective { constructor() { } } ``` ### 二、引入`ElementRef`模塊操作DOM元素 ``` import { Directive,ElementRef } from '@angular/core'; //引入ElementReft模塊操作DOM @Directive({ selector: '[appHighlight]' //屬性指令的名稱,使用前綴避免與內部指令沖突 }) export class HighlightDirective { //修改元素的背景顏色 constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } } ``` ### 三、引入?`HostListener`裝飾器響應指令所在元素的事件 ``` import { Directive,ElementRef ,HostListener} from '@angular/core'; //引入HostListener響應指令的事件 @Directive({ selector: '[appHighlight]' //屬性指令的名稱,使用前綴避免與內部指令沖突 }) export class HighlightDirective { //綁定事件,響應指令的行為 //鼠標移入事件 @HostListener('mouseenter') onMouseEnter() { this.highlight('yellow'); } //鼠標移出事件 @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } //修改元素的背景顏色 private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } } ``` ### 四、使用`Input`數據綁定向指令傳遞值 ``` import { Directive,ElementRef ,HostListener,Input} from '@angular/core'; //引入Input模塊 用于外部向指令傳值 @Directive({ selector: '[appHighlight]' //屬性指令的名稱,使用前綴避免與內部指令沖突 }) export class HighlightDirective { //定義外部傳遞給指令的屬性 //使用別名,外部使用appHighlight傳遞值，內部使用highlightColor代表值 @Input('appHighlight') highlightColor: string; @Input() defaultColor: string; //第二個屬性,傳遞的默認值 constructor(private el: ElementRef) {} //綁定事件，響應指令行為 //鼠標移入事件 @HostListener('mouseenter') onMouseEnter() { //賦予默認值，當用戶沒有傳遞值時使用默認值 this.highlightColor = (this.highlightColor||this.defaultColor || '#673ab7'); this.highlight(this.highlightColor); } //鼠標移出事件 @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } } ``` ### 五、使用自定義指令 ``` //傳遞第二個參數,defaultColor="violet" <p [appHighlight]='color' defaultColor="violet">DIV指令</p> //沒有傳值，使用默認值 <p [appHighlight]="color" class="hello">Highlight me!</p> export class AppComponent { color: string; } ```