​我們按照下面的步驟一步一步帶著思考去學習，相信很容易就能掌握Angular自定義指令,廢話不多少，開始學習，你準備好來嗎？

概述

所謂指令就是用於改變一個DOM元素的外觀或行為，Angular2為我們封裝了很多的內建指令，專案中也無時無刻不在使用指令,Angular2中有三類指令

(1).結構型指
通過新增和移除 DOM 元素改變 DOM 佈局的指令，例如：Ngif和Ngfor
(2).屬性型指令
改變元素、元件或其它指令的外觀和行為的指令，例如：NgClass
(3).元件
元件是一個模板指令，相信大家都很熟悉

今天我們來講講自定義指令，通過一個案例來學習自定義屬性指令，需求是：在輸入框輸入值時，如果值中包含空格，我們把空客去掉,最終的效果是這樣的

第一步、建立自定義指令

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

@Directive({
 selector: '[input-trim]'
})
export class InputTrimDirective {
 constructor(public elementRef: ElementRef) {
 }
 @HostListener('keyup', ['$event.target'])
 keyupFun(evt) {
   if (evt.value) {
     this.elementRef.nativeElement

我們通過import從core庫中匯入Directive,HostListener,ElementRef的引入,下面我們分別來看看的作用。
Directive
用於@Directive裝飾器功能，用於定義這個class是一個指令，通過@Directive修飾這樣就擁有了指令的功能，我們在元組中宣告selector屬性值為[input-trim]，方括號的寫法表示是一個屬性指令 還有以下幾種寫法：

 element-name： 使用元素名稱選擇
 .class：                使用類名選擇
 [attribute]

這裡我們採用屬性的方式指定選擇器，在頁面的使用是這樣的

@Directive({
selector: '[input-trim]'
})

再模版中使用的時候 直接寫input-trim

<input type="text" id="name" input-trim>

如果你使用類名選擇是這樣的

<input type="text" id="name" class="input-trim">

後面依次類推

HostListener

HostListener 是屬性裝飾器，用來為宿主元素新增事件監,類似於我們原生JavaScript的addEventListener。 這裡我們監聽了keyup事件（還可以定義原生JavaScript中的其他事件），當表單中有輸入的時候我們就會呼叫方法，傳遞了一個$event物件進去，後面緊跟我們觸法keyup事件的方法體

@HostListener('keyup', ['$event.target'])
keyupFun(evt) {
if (evt.value) {
this.elementRef.nativeElement.value = evt.value.trim();
  }
}

ElementRef（注意：需要在建構函式中注入進去）
用於獲取獲取DOM節點相關的屬性
這裡我們當我們在頁面表單輸入的時候，會呼叫keyupFun方法，首先判斷是否有值輸入，有的情況下，我們通過傳遞進來的evt獲取表單的value值，在呼叫trim()方法去除空格，賦值給elementRef.nativeElement.value渲染到頁面

第二步、在app.module宣告
我們的指令寫好之後還要在app.module的declarations中宣告才能生效

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {InputTrimDirective} from "./direcitve/input-trim.directive";

@NgModule({
 declarations: [
   AppComponent,
   InputTrimDirective
 ],
 imports: [
   BrowserModule,
   FormsModule,
 ],
 bootstrap: [AppComponent]
})
export class AppModule {
}

第三步、在模板檔案中引用指令

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
  template: `<label for="name">姓名</label>  
             <input type="text" id="name" input-trim>`,
})
export class AppComponent {
title = 'app works!';
}

第四步、頁面展示

擴充套件Host
這裡如果我們不採用HostListener屬性裝飾器來監聽事件，我們可以在指令的 metadata 資訊中，設定宿主元素的事件監聽資訊，具體示例如下：

import {Directive, ElementRef, HostListener} from "@angular/core";
@Directive({
selector: '[input-trim]',
host: {
'(keyup)': 'keyupFun($event.target)'
}
})
export class InputTrimDirective {
constructor(public elementRef: ElementRef) {
  }

keyupFun(evt) {
if (evt.value) {
this.elementRef.nativeElement.value = evt.value.trim();
}
  }
}

這種方式的實現效果跟上面是一樣

這裡不僅可以是監聽事件，還可以自定義屬性，看看下面程式碼

import {Directive} from "@angular/core";
@Directive({
selector: '[input-trim]',
host: {
'role-data': 'hello world'
}
})
export class InputTrimDirective {

}

這裡我們自定義了一個屬性 role-data，對應值為 hello world（這裡為了演示，此屬性沒有任何意義），再看看頁面input表單中就會有一個role-data屬性，看下面圖片

個人學習心得，大神路過 ，不喜勿噴
有問題加我微信提問或者留言