在第四章的時候我們學習了angular的通用指令（通用指令地址），本章中我們自定義指令。

本人理解自定義指令是擴充套件傳統的HTML語法，類似傳遞HTML語法中的class,style,id

自定義指令分下列幾種

• 1、屬性指令
  
  • 普通的屬性指令
  • 為指令繫結輸入
  • 響應使用者操作
• 2、結構指令

一、新建一個工程,建立基本的結構

• ng new directivedemo 建立工程
• ng g directive mydirective/mydir1 在一個指令資料夾下建立一個mydir1指令
• ng g component dirdemo01 建立一個demo元件
  

使用angular-cli

建立就不需要手動去app.module.ts模組試圖類中新增自己建立的指令Mydir1Directive

二、普通的屬性指令的使用

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

@Directive({
  selector: '[appMydir1]' //appMydir1表示指令名稱
})
export class Mydir1Directive {
  //ElementRef表示真實的Dom元素
  constructor(el:ElementRef) {
      el.nativeElement.style.backgroundColor = "#f00"
 
;
  }
}

//html程式碼中使用
<p appMydir1>
  dirdemo01 works!
</p>

三、為指令繫結輸入

這種方式相對於上面那種方式更加的靈活，外面傳遞引數進去(簡單的是元件間的資料互動)

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

@Directive({
  selector: '[appMydir1]',
  //inputs:['appMydir1']
})
export class Mydir1Directive {
  private _defaultColor='green'
 
;
  private el:HTMLElement;
  @Input("appMydir1") //這個也可以刪除把inputs:['appMydir1']放出來
  set appMydir1(colorName:string){
    console.log(colorName);
    this.setStyle(colorName);
  };

  constructor(el:ElementRef){
    this.el=el.nativeElement;
    this.setStyle(this._defaultColor);
  }

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

//html程式碼
<p [appMydir1]="colorName">
  dirdemo01 works!
</p>
<input type="button" value="紅色" (click)="colorName='red'"/>
<input type="button" value="綠色" (click)="colorName='#360'"/>
<input type="button" value="藍色" (click)="colorName='blue'"/>

四、響應使用者操作

@HostListener裝飾器指向使用屬性指令的DOM元素，使得DOM元素的事件與指令關聯起來

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

@Directive({
  selector: '[appMydir2]',
  inputs:['appMydir2']
})
export class Mydir2Directive {
  private _defaultColor = "yellow";
  private el: HTMLElement;

  private backgroundColor:string;
  //@Input("appMydir2") backgroundColor:string;

  constructor(el:ElementRef) {
    this.el = el.nativeElement;
    this.setStyle(this._defaultColor);
  }

  @HostListener("click") onClick(){
    this.setStyle(this.backgroundColor || this._defaultColor);
  }
  setStyle(color:string){
    this.el.style.backgroundColor = color;
  }
}

//html程式碼
<p [appMydir2]="'red'">
  dirdemo01 works!
</p>

五、結構指令,angular中結構指令是指對DOM新增與刪除類似ngIf這樣的

現在模擬ngIf的功能

需要注入這兩個服務
* TemplateRef可以用來訪問元件中的模板
* ViewContainerRef可作為試圖內容渲染器

//自定義指令的程式碼
import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appMydir3]',
  inputs:["appMydir3"]
})
export class Mydir3Directive {
  set condition(newCondition:boolean){
    if(newCondition){
      this.viewContainer.createEmbeddedView(this.templateRef);
    }else {
      this.viewContainer.clear();
    }
  }
  constructor(
    private templateRef:TemplateRef<any>,
    private viewContainer:ViewContainerRef
  ){}

}

//html程式碼
<div class="box" *appMydir3="true"></div>
<div class="box" *appMydir3="false"></div>