Angular2-自定义指令@Directive

印度泰姬陵与人力车

概述

所谓指令就是用于改变一个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-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属性，看下面图片

<完>

福利：如果你是喜欢看书的朋友，不妨点击【有惊喜】这是我在亚马逊买的电子书。都非常珍贵，希望你能喜欢

作者：小处成就大事

简介：一个喜欢分享和学习的前端开发程序猿，平时喜欢看看书，游泳，爬山，户外骑行等，期待与志同道合的你成为朋友，一起交流、一起进步。

初衷：对我来说，写文章是学习和记录一些没有精通和完全掌握的知识点，其次才是分享知识。通过自己查找资料和经验心得整理出来，做到通俗易懂分享给需要的人，分享知识不是为了炫耀，也不是为了谋利，而是为了更多需要汲取知识的人，可以收获知识，同时自己也可以从中收获知识，坚持做知识分享真的很难，但是我会坚持下去····

博客：小处成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和学习，期待你的到来