Angular 是一个流行的前端框架，它在前端开发中广泛应用。其中，指令（Directive）是 Angular 中的一个重要概念，它可以让开发者通过 HTML 扩展应用程序的功能。
指令是什么？
指令是 Angular 的一种编程模式，它可以通过扩展 HTML 元素、属性、类或注释等方式，让我们可以在页面上实现自定义的行为或功能。
指令可以分为三种不同类型：
组件指令（Component Directive）：组件是一种特殊类型的指令，它是 Angular 应用程序的基本构建块，用来封装视图、业务逻辑和数据。
结构型指令（Structural Directive）：结构型指令可以改变 DOM 树的结构，它们可以添加、删除或替换页面上的元素。例如，ngIf、ngFor 等。
属性型指令（Attribute Directive）：属性型指令可以改变元素的外观或行为，它们会在 HTML 元素上添加、删除或修改属性。例如，ngStyle、ngClass 等。
如何编写指令？
编写指令需要创建一个类，这个类需要使用 @Directive 装饰器来标识它是一个指令。
例如，我们可以创建一个指令，让鼠标悬停在一个元素上时，改变它的背景色。
-- -------------------- ---- -------
------ - ---------- ----------- ------------ - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
------------------- --- ----------- - -
--------------------------- -------------- -
-------------------------
-
--------------------------- -------------- -
---------------------
-
------- ---------------- ------ - ----- -
------------------------------------------- - ------
-
-在上面的代码中，我们使用了 @Directive 装饰器来标识 HighlightDirective 为一个指令，并设置它的选择器为 [appHighlight]，这意味着它会作用于 HTML 中带有 appHighlight 属性的元素上。
然后，在 HighlightDirective 中定义了两个监听事件函数，分别对应鼠标进入和离开事件。当监听到鼠标事件触发时，HighlightDirective 会调用 highlight 函数来改变元素的背景色。
如何使用指令？
在 Angular 中使用指令非常简单。只需要将指令名称，加上方括号或括号，放置在 HTML 元素上即可。
例如，我们在一个按钮上使用上面创建的 HighlightDirective。
<button appHighlight>Hover Me</button>
上面的代码中，我们使用了 appHighlight 作为指令名称，将这个指令加上按钮元素上，这样当鼠标悬停在按钮上时，指令会改变按钮的背景色。
总结
指令是 Angular 中的一个重要概念，它可以让我们通过扩展 HTML 元素、属性、类或注释等方式，实现自定义的行为或功能。在 Angular 中编写指令、使用指令也非常简单，只需要创建一个类，使用 @Directive 装饰器标识它是一个指令，然后在 HTML 元素上使用指令名称即可。
Angular 指令的详细使用请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d38e1cb5eee0b525b3107b