概述
所謂指令就是用于改變一個DOM元素的外觀或行為，Angular2為我們封裝了很多的內置指令，項目中也無時無刻不在使用指令,Angular2中有三類指令
結構型指： 通過添加和移除 DOM 元素改變 DOM 布局的指令，例如：NgFor和NgIf
屬性型指令：改變元素、組件或其它指令的外觀和行為的指令，例如：NgClass
組件：組件是一個模板指令，相信大家都很熟悉
今天我們來講講自定義指令，通過一個案例來學習自定義屬性指令，需求是：在輸入框輸入值時，如果值中包含空格，我們把空客去掉
第一步、創建自定義指令
我們通過import從core庫中導入Directive,HostListener,ElementRef的引入
Directive
用于@Directive裝飾器功能，用于定義這個class是一個指令，通過@Directive修飾這樣就擁有了指令的功能，我們在元組中聲明selector屬性值為[input-trim]，方括號的寫法表示是一個屬性指令
還有以下幾種寫法：
element-name：使用元素名稱選擇
.class：使用類名選擇
[attribute]：使用屬性選擇
[attribute=value]：使用屬性和值選擇
:not(sub_selector)：只有當元素與sub_selector不匹配時才選擇
selector1,selector2：選擇擇selector1或selector2
這里我們采用屬性的方式指定選擇器，在頁面的使用是這樣的(加粗部分)
<input type="text" id="name" input-trim />
如果你使用類名選擇是這樣的
<input type="text" id ="name" class="input-trim" />
以此類推
HostListener
HostListener 是屬性裝飾器，用來為宿主元素添加事件監,類似于我們原生JavaScript的addEventListener
@HostListener這里我們監聽了keyup事件（可以定義原生JavaScript中的其他事件），當表單中有輸入的時候我們就會調用方法，傳遞了一個$event對象進去，后面緊跟我們觸法keyup事件的方法體
ElementRef（注意：需要在構造函數中注入進去）
用于獲取獲取DOM節點相關的屬性
這里我們當我們在頁面表單輸入的時候，會調用keyupFun方法，首先判斷是否有值輸入，有的情況下，我們通過傳遞進來的evt獲取value值，在調用trim()方法去除空格，賦值給elementRef.nativeElement.value渲染到頁面
第二步、在app.module聲明
我們的指令寫好之后還要在app.module聲明才能生效
第三步、在模板文件中引用指令
最后一步
打開瀏覽器在表單中輸入，當我們敲空格，會被刪除，看效果圖。這樣我們就實現了一個簡單的去空格的指令，這里使用這個案例只是為了演示使用自定義指令
擴展:Host
這里如果我們不采用HostListener屬性裝飾器來監聽事件，我們可以在指令的 metadata 信息中，設定宿主元素的事件監聽信息，具體示例如下：
我們這里通過這種方式監聽實踐相當于在頁面在定義了一個click事件，函數就是onClick（），當然這個onClick（）需要我們在指令中進行定義。最好展示的效果跟上面方式是一樣的。
這里不僅可以是監聽事件，還可以自定義屬性，看看下面代碼
這里我們自定義了一個屬性 role-data，對應值為data-trim（這里為了演示，此屬性沒有任何意義），再看看頁面input表單中就會有一個role-data屬性，看下面圖片
<完>
福利：如果你是喜歡看書的朋友，不妨點擊【有驚喜】這是我在亞馬遜買的電子書。都非常珍貴，希望你能喜歡
作者：小處成就大事
簡介：一個喜歡分享和學習的前端開發程序猿，平時喜歡看看書，游泳，爬山，戶外騎行等，期待與志同道合的你成為朋友，一起交流、一起進步。
初衷：對我來說，寫文章是學習和記錄一些沒有精通和完全掌握的知識點，其次才是分享知識。通過自己查找資料和經驗心得整理出來，做到通俗易懂分享給需要的人，分享知識不是為了炫耀，也不是為了謀利，而是為了更多需要汲取知識的人，可以收獲知識，同時自己也可以從中收獲知識，堅持做知識分享真的很難，但是我會堅持下去····
博客：小處成就大事_新浪博客
如果有志同道合的朋友不妨加微信一起交流和學習，期待你的到來
