Angular 中如何使用 @Directive 装饰器创建自定义指令
在 Angular 中，我们可以使用 @Directive 装饰器来创建自定义指令。通过创建自定义指令，我们可以扩展 HTML 元素的行为，为元素添加特定的功能或样式。
@Directive 装饰器是 Angular 中定义指令的主要方式之一。它可以应用于类，表示这个类是一个指令。@Directive 装饰器有一个配置对象，用于定义指令的属性和行为。
下面是一个简单的自定义指令的例子：
-- -------------------- ---- -------
------ - ---------- ----------- ------------ - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
------------------- --- ----------- --
--------------------------- -------------- -
-------------------------
-
--------------------------- -------------- -
---------------------
-
------- ---------------- ------- -
------------------------------------------- - ------
-
-上面的代码中，我们定义了一个名为 HighlightDirective 的自定义指令。我们把这个自定义指令应用到了 HTML 元素中，例如：<div appHighlight>Some text</div>。这个指令将为这个 div 元素添加一个高亮特效。
这个指令做了什么？
首先，我们使用 @Directive 装饰器来定义一个指令，这个指令的名字是 HighlightDirective。
我们使用 ElementRef 参数来获取指令所在的元素，它是一个 Angular 内置服务，提供了对 DOM 元素的访问。
我们定义了两个 HostListener，用来监听指定的事件触发，这里是鼠标进入和离开。
然后，我们在这两个事件中对元素做出反应（高亮或取消高亮）。
最后，我们定义了一个名为 highlight 的私有方法，用于设置元素的背景颜色。
如果你现在想在 Angular 应用中使用这个指令，只需要在 HTML 元素中添加 appHighlight 属性即可。例如：
<div appHighlight> This text will be highlighted when you mouse over it. </div>
这会对这个 div 元素添加一个鼠标进入时背景变为黄色的效果。
总结
在 Angular 中，我们可以使用 @Directive 装饰器来创建自定义指令，指令可以扩展 HTML 元素的行为，为元素添加特定的功能或样式。定义指令时，我们可以使用 ElementRef，HostListener 等内置服务来访问 DOM 元素，并使用各种事件监听器来响应事件。自定义指令可以提升组件的可重用性和可维护性，是 Angular 框架中不可或缺的一部分。
示例代码：https://stackblitz.com/edit/angular-custom-directives
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6715648841e989430eea2