概述
所謂指令就是用于改變一個(gè)DOM元素的外觀或行為糕篇，Angular2為我們封裝了很多的內(nèi)置指令，項(xiàng)目中也無時(shí)無刻不在使用指令,Angular2中有三類指令
結(jié)構(gòu)型指： 通過添加和移除 DOM 元素改變 DOM 布局的指令锦针，例如：NgFor和NgIf
屬性型指令：改變?cè)亍⒔M件或其它指令的外觀和行為的指令置蜀，例如：NgClass
組件：組件是一個(gè)模板指令奈搜，相信大家都很熟悉
今天我們來講講自定義指令，通過一個(gè)案例來學(xué)習(xí)自定義屬性指令盯荤，需求是：在輸入框輸入值時(shí)馋吗，如果值中包含空格，我們把空客去掉
第一步秋秤、創(chuàng)建自定義指令
我們通過import從core庫中導(dǎo)入Directive,HostListener,ElementRef的引入
Directive
用于@Directive裝飾器功能宏粤，用于定義這個(gè)class是一個(gè)指令脚翘，通過@Directive修飾這樣就擁有了指令的功能，我們?cè)谠M中聲明selector屬性值為[input-trim]绍哎，方括號(hào)的寫法表示是一個(gè)屬性指令
還有以下幾種寫法：
element-name：使用元素名稱選擇
.class：使用類名選擇
[attribute]：使用屬性選擇
[attribute=value]：使用屬性和值選擇
:not(sub_selector)：只有當(dāng)元素與sub_selector不匹配時(shí)才選擇
selector1,selector2：選擇擇selector1或selector2
這里我們采用屬性的方式指定選擇器来农，在頁面的使用是這樣的(加粗部分)
<input type="text" id="name" input-trim />
如果你使用類名選擇是這樣的
<input type="text" id ="name" class="input-trim" />
以此類推
HostListener
HostListener 是屬性裝飾器，用來為宿主元素添加事件監(jiān),類似于我們?cè)鶭avaScript的addEventListener
@HostListener這里我們監(jiān)聽了keyup事件（可以定義原生JavaScript中的其他事件）崇堰，當(dāng)表單中有輸入的時(shí)候我們就會(huì)調(diào)用方法沃于，傳遞了一個(gè)$event對(duì)象進(jìn)去，后面緊跟我們觸法keyup事件的方法體
ElementRef（注意：需要在構(gòu)造函數(shù)中注入進(jìn)去）
用于獲取獲取DOM節(jié)點(diǎn)相關(guān)的屬性
這里我們當(dāng)我們?cè)陧撁姹韱屋斎氲臅r(shí)候赶袄，會(huì)調(diào)用keyupFun方法揽涮，首先判斷是否有值輸入，有的情況下饿肺，我們通過傳遞進(jìn)來的evt獲取value值蒋困，在調(diào)用trim()方法去除空格，賦值給elementRef.nativeElement.value渲染到頁面
第二步敬辣、在app.module聲明
我們的指令寫好之后還要在app.module聲明才能生效
第三步雪标、在模板文件中引用指令
最后一步
打開瀏覽器在表單中輸入，當(dāng)我們敲空格溉跃，會(huì)被刪除村刨，看效果圖。這樣我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的去空格的指令撰茎，這里使用這個(gè)案例只是為了演示使用自定義指令
擴(kuò)展:Host
這里如果我們不采用HostListener屬性裝飾器來監(jiān)聽事件嵌牺，我們可以在指令的 metadata 信息中，設(shè)定宿主元素的事件監(jiān)聽信息龄糊，具體示例如下：
我們這里通過這種方式監(jiān)聽實(shí)踐相當(dāng)于在頁面在定義了一個(gè)click事件逆粹，函數(shù)就是onClick（），當(dāng)然這個(gè)onClick（）需要我們?cè)谥噶钪羞M(jìn)行定義炫惩。最好展示的效果跟上面方式是一樣的僻弹。
這里不僅可以是監(jiān)聽事件，還可以自定義屬性他嚷，看看下面代碼
這里我們自定義了一個(gè)屬性 role-data蹋绽，對(duì)應(yīng)值為data-trim（這里為了演示，此屬性沒有任何意義）筋蓖，再看看頁面input表單中就會(huì)有一個(gè)role-data屬性卸耘，看下面圖片
<完>
福利：如果你是喜歡看書的朋友，不妨點(diǎn)擊【有驚喜】這是我在亞馬遜買的電子書扭勉。都非常珍貴鹊奖，希望你能喜歡
作者：小處成就大事
簡(jiǎn)介：一個(gè)喜歡分享和學(xué)習(xí)的前端開發(fā)程序猿，平時(shí)喜歡看看書涂炎，游泳忠聚，爬山设哗，戶外騎行等，期待與志同道合的你成為朋友两蟀，一起交流网梢、一起進(jìn)步。
初衷：對(duì)我來說赂毯，寫文章是學(xué)習(xí)和記錄一些沒有精通和完全掌握的知識(shí)點(diǎn)战虏，其次才是分享知識(shí)。通過自己查找資料和經(jīng)驗(yàn)心得整理出來党涕，做到通俗易懂分享給需要的人烦感，分享知識(shí)不是為了炫耀，也不是為了謀利膛堤，而是為了更多需要汲取知識(shí)的人手趣，可以收獲知識(shí)，同時(shí)自己也可以從中收獲知識(shí)肥荔，堅(jiān)持做知識(shí)分享真的很難绿渣，但是我會(huì)堅(jiān)持下去····
博客：小處成就大事_新浪博客
如果有志同道合的朋友不妨加微信一起交流和學(xué)習(xí)，期待你的到來
