Angular 是一个流行且强大的前端框架，提供了许多内置指令来简化开发工作。不过，有时候内置指令并不能完全满足我们的需求，这时候就需要使用自定义指令来扩展 Angular 功能。在本文中，我们会从头开始，一步步地教大家如何创建自定义指令。
什么是指令？
在 Angular 中，指令可以理解为一种 HTML 标记的扩展，它们可以添加特定的行为或样式到元素上。Angular 内置了很多指令，如 ngIf、ngFor 等。当然，我们也可以自己创建指令。
如何创建自定义指令？
在 Angular 中，我们可以使用 @Directive 装饰器来创建自定义指令。下面是一个简单的例子。
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
--------------- ----------- -
-------------------------------------- - ---------
-
-上面的代码定义了一个名为 HighlightDirective 的指令，并在其构造函数中使用 ElementRef 对象来获取当前元素，并设置其背景颜色为黄色。selector 属性指定了如何在 HTML 文件中使用该指令。在这里，我们使用属性选择器 '[appHighlight]' ，因此可以在 HTML 中使用以下标记使用该指令：<div appHighlight>...</div>。
除了 ElementRef，我们还可以使用其他内置服务，如 Renderer、Injectable 等，来实现自定义指令所需的功能。
传递参数
有时候，我们需要向自定义指令传递参数。可以通过 @Input 装饰器来完成这个任务。下面是一个例子。
-- -------------------- ---- -------
------ - ---------- ----------- ----- - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
-------- --------------- -------
--------------- ----------- -
-- ---------
-------------------------------------- - ---------
-
------------- -
------------------------------------------- - ------------------- -- ---------
-
-在上面的代码中，我们定义了一个名为 highlightColor 的输入属性，用于接收外部传递过来的颜色值。并在 ngOnChanges 生命周期钩子函数中，处理这个传递过来的属性值，并设置为元素的背景色。
在 HTML 中，可以通过以下方式传递参数。
<div appHighlight [highlightColor]="'blue'">...</div>
监听事件
有时候，我们需要自定义指令来监听某些事件，以便在事件发生时执行一些操作。可以通过 @HostListener 装饰器来完成这个任务。下面是一个例子。
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- ------------
--
------ ----- -------------- -
---------------------- ------------------
----------- -
-------------------- -------- ----------------
-
-在上面的代码中，我们定义了一个名为 ClickDirective 的指令，并通过 @HostListener 装饰器监听了 click 事件。当事件发生时，onClick() 方法就会被调用，并打印出被点击元素的标签名。
在 HTML 中，可以通过以下方式使用该指令。
<button appClick>Click me</button>
总结
Angular 中的自定义指令可以帮助我们扩展框架的功能，并实现更加灵活的应用。本文从头开始教大家如何创建自定义指令，并介绍了传递参数和监听事件等常见用法。希望能够帮助大家更好地理解 Angular 框架的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654c6d2f7d4982a6eb5f1033