Angular 5 自定义指令（二）

接上篇文章

《Angular 5 自定义指令（一）》

这篇文章我将介绍一下使用自定义指令来监听元素的事件。

首先，让我们来看一下最终实现效果

图1 鼠标移除效果图

图2 鼠标移入效果图

图1显示了鼠标移出的效果，当我们把鼠标移入篮筐时，会变成图2的效果，即篮框背景由白色变成黄色，底部出现一行红色的字。

下面我们来分析一下代码：

图3 代码截图

1. 添加一个输入属性，这个输入属性将作为指令的配置项。这里，我们以对象的形式来定义这个输入项，可以看做是为了日后的扩展做准备，如果后面还有别的东西需要配置，直接加到这个配置项里即可。在这个输入属性的装饰器里，我为该输入属性定义了一个和当前指令选择器相同的别名，这是因为，如果我不这么写的话，该配置项只能以如下方式使用：

[config]="{querySelector: 'p'}">

而我期望的是如下这种使用方式：

[appFirstDirective]="{querySelector: 'p'}">

也就是说，为该指令的输入属性定义一个和指令选择器相同的别名，就可以使用属性绑定的方式来使用指令内定义的输入属性了。这里有一个隐藏的语义，即定义在指令内的输入属性，其目标其实就是该指令的宿主，可以理解成在指令内部为其宿主定义一个输入属性（当然，这是我个人的理解，可能不是很准确）。

2. 使用HostBinding装饰器为宿主添加一个属性绑定。这一行代码的意思就是说，当变量isHovering的值为true时，当前指令就会为宿主添加一个名为"yellowBackground"的class，当变量isHovering的值为false时，当前指令就会从宿主上移除名为"yellowBackground"的class。

3. 使用HostListiner装饰器监听宿主的事件。这一行代码的意思就是说，监听宿主的"mouseover"事件，并当该事件触发时，执行我们这里定义的"onMouseOver"方法。可以看到，在我们的”onMouseOver“事件的实现最后一行，我们将2中提到的isHovering变量赋值为true，这样，在"mouseover"事件触发，即鼠标移入宿主对象时，宿主对象就会被添加一个"yellowBackground"的class。

4. 同3。

5. 我们需要注释掉在前面一张中用于修改宿主背景的这一行代码，否则，当isHovering变成true，宿主对象添加了"yellowBackground"这个class以后，宿主的背景也无法变成黄色。我的理解是，通过代码直接修改的宿主对象的属性拥有最高的优先级。

6. 为最终效果添加一点sytle。

7. 使用指令，并同时绑定配置对象。

8. 用于 隐藏 / 显示 的段落。在这里，我将其默认的style设置成"display:none"，这样，默认情况下，该段落是隐藏的，当鼠标移入篮框时，就会触发"mouseover"事件，然后后面的过程就如3中讨论的那样了。在指令的"onMouseOver"处理函数中，我们首先获取到了宿主对象，并通过"querySelector"函数获取到了宿主对象上的段落，然后，将该段落的display赋值为block，最终，该段落就显示出来了。

---

自定义指令涉及的知识点应该差不多都在这里了，我们可以使用自定义指令来实现许多功能。接下去，我计划使用指令来实现一个angular版的lightbox插件。