Angular 5 自定义指令（一）

在学习了Angular的指令后，发现这是一个非常强大的功能，有点类似WPF的附加属性(Attached Property)。这里，我将整理一下Angular指令相关的一些知识，大部分文中提到的内容来自国外的一篇博文，个人认为非常适合于萌新入门，下面是原文链接

https://codecraft.tv/courses/angular/custom-directives/creating-a-custom-directive/

注：以上链接可能需要翻墙才能看....

下面将使用AngularCLI创建项目，并使用其提供的一些指令创建相关内容，这里，对AngularCLI的知识不做讲解，默认大家都知道怎么把玩这个东西。

---

Step 1 初始准备工作

    1.1 使用AngularCLI创建一个项目。(项目命名为directives吧，创建过程略)

    1.2 在项目文件夹下，创建一个Directive，我将其命名为 firstDirective，创建命令如下：

           ng g directive directive/firstDirective

           此时，项目的结构应该如下图所示：

图1 项目结构

    图中红框内的就是通过命令创建的指令文件

1.3 删掉默认的模板内容，添加入测试内容。

      修改app.component.html，和app.component.css，修改结果如下

图2 模板修改结果

好了，准备工作基本完成，让我们看一下现在页面的呈现效果。

图3 初始页面呈现结果

Step 2 使用Directive修改Element背景

    接下去，我们将使用指令实现如下效果：

图4 最终呈现效果

    效果非常简单，就是修改一下蓝色框中的背景颜色，下面我们将使用Directive来实现该效果。

    由于代码也非常简单，我直接截图了

图5 代码

    1. css选择器，代表将声明了appFirstDirective的html元素作为first-directive对象的宿主。

    2. 依赖注入 ElementRef， 可以使用它的对象的nativeElement属性获得宿主对象。

    3. 依赖注入 Renderer，可以使用它来实现平台无关的渲染。其实，不依赖Renderer也可以直接使用 ElementRef的nativeElement属性获取到宿主对象，并通过类似"el.nativeElement.style.backgroundColor = 'gray'"这样的写法来达到我们想要的效果。但是，这样做仅适用于浏览器，如果当前执行环境是手机或者其他，那上述代码就无法使用了。因此，我们应该使用平台无关的Renderer来实现我们想要的效果。如图中directive实现文件第10行代码所示，可以使用renderer的setElementStyle来实现我们的效果。

    4. 在模板中使用我们的自定义指令。

---

至此，一个最简单的自定义指令就这样实现了。当然，指令能做的并非只是修改修改元素属性那么简单，还有监听元素的事件等高级玩法，我将在接下去的文章中继续介绍。