Angular 是一个很强大的前端框架，它为我们提供了许多内置的指令，比如 ng-click、ng-if、ng-model 等等。但是这些内置的指令不一定能够满足我们的需求，所以我们需要学会自定义 Angular 指令。
什么是指令
指令（Directive）是 Angular 提供的一种非常重要的组件，它允许我们自定义 HTML 标签，使其可以拥有特定的功能。指令可以被用来封装界面上的某些功能，比如显示一些数据，连接后端 API，绑定 DOM 事件等等。
Angular 内置了很多指令，比如 ng-click、ng-if、ng-show、ng-model 等等。而自定义指令的作用就是让我们可以创建自己的 HTML 标签，并为这个标签指定某种行为或功能。
如何使用指令
在 Angular 中，指令又分为两种：结构型指令和属性型指令。结构型指令改变元素的布局，属性型指令改变元素的样式和行为。
结构型指令
结构型指令会添加、删除或替换一个元素。常见的结构型指令包括 ngFor、ngIf、ngSwitch 等等。
举个例子，我们可以用 ngFor 指令来循环遍历数据并动态地生成 HTML 元素。
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>属性型指令
属性型指令会改变一个元素、组件或另一个指令的外观或行为，比如 ngClass、ngStyle、ngModel 等等。
举个例子，我们可以用 ngModel 指令来实现双向数据绑定。
<input type="text" [(ngModel)]="username" />
如何自定义指令
要自定义指令，我们需要用到 Angular 中的 @Directive 装饰器。该装饰器可以将一个类标记为指令，并指定该指令的一些属性。
import { Directive } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor() {}
}在上述代码中，我们定义了一个名称为 HighlightDirective 的指令，并用 @Directive 装饰器指定 selector 为 appHighlight。
现在我们需要在该指令中实现一些逻辑，比如在该指令所在的元素上添加一些样式或绑定一些事件。
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
------------------- --- ----------- -
-------------------------------------- - ---------
-
-在上述代码中，我们注入了一个 ElementRef 对象，该对象表示该指令所在的元素。然后我们就可以通过该元素来实现一些逻辑，比如修改元素的背景色。
最后，我们需要在模板中使用该指令。
<p appHighlight>We are highlighting this text.</p>
在上述代码中，我们在一个段落元素上使用了我们自定义的指令 appHighlight。
自定义指令示例
下面是一个完整的示例代码，该代码自定义了一个名为 appHover 的指令，该指令可以为鼠标悬浮在元素上时添加某些样式。
-- -------------------- ---- -------
------ - ---------- ----------- ---------- ------------ - ---- ----------------
------------
--------- ------------
--
------ ----- -------------- -
------------------- --- ----------- ------- --------- ---------- --
--------------------------- -------------- -
--------------------------------------------- ------------------- ----------
-
--------------------------- -------------- -
--------------------------------------------- ------------------- ------
-
-在上述代码中，我们注入了一个 Renderer2 对象，该对象可以更好地处理浏览器兼容性和安全性。然后我们在该指令中定义了两个 HostListener，分别处理鼠标进入和离开元素时的事件。最后，我们在这两个事件中设置了元素的样式。
现在我们就可以在模板中使用该指令了。
<p appHover>This is a paragraph.</p>
当鼠标悬浮在该段落上时，就会自动添加背景色为黄色的样式。
总结
Angular 提供了非常丰富的指令，但是在某些情况下我们仍然需要自定义指令。自定义指令可以为我们提供更加灵活和可扩展的功能，尤其在处理复杂的业务逻辑时非常有用。通过本文的学习，我们学会了 Angular 中如何自定义指令，并实现了一个简单的鼠标悬浮指令示例。希望本文能够对大家学习和使用 Angular 框架有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496584c48841e9894368acc