Angular 是一种流行的前端框架，它提供了很多内置指令，例如 ng-if、ng-for、ng-style 等等，这些指令可以帮助我们更方便地操作 DOM 元素和数据。除了内置指令，Angular 还允许我们自定义指令，以便我们能够更好地满足我们的需求。在这篇文章中，我们将会学习如何在 Angular 中使用 directive 自定义指令。
创建一个简单的 directive
首先，我们来创建一个简单的 directive，它将会改变一个元素的背景颜色。我们可以使用 Angular 的 @Directive 装饰器来创建一个 directive，它需要一个选择器和一个宿主元素。
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
------------------- --- ----------- -
-------------------------------------- - ---------
-
-在这个例子中，我们创建了一个名为 ChangeColorDirective 的 directive，它的选择器是 '[changeColor]'，表示它可以被应用到具有 changeColor 属性的元素上。在 constructor 中，我们使用 ElementRef 来获取宿主元素，并将它的背景颜色设置为黄色。
现在，我们需要将这个 directive 应用到一个元素上。我们可以在 HTML 中使用 [changeColor] 属性来应用这个 directive。
<div [changeColor]>Hello, Angular!</div>
现在，我们可以看到这个元素的背景颜色已经变成了黄色。
使用 Input 和 Output 装饰器
除了改变元素的样式，directive 还可以接受输入、输出、事件等等。Angular 提供了 @Input 和 @Output 装饰器来帮助我们定义 directive 的输入和输出。
-- -------------------- ---- -------
------ - ---------- ----------- ------ ------- ------------ - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
--------------- ------ -------
--------- ------------ - --- -----------------------
------------------- --- ----------- --
---------- -
------------------------------------------- - ---------- -- ---------
-
------------- -
-----------------------------------
-
-在这个例子中，我们定义了一个名为 color 的输入属性，它可以用 [color] 属性来设置。我们还定义了一个名为 colorChanged 的输出属性，它会在 color 属性改变时发射一个事件。
在 ngOnInit 方法中，我们使用 this.color 来获取输入属性的值，并将它作为元素的背景颜色。在 ngOnChanges 方法中，我们使用 this.colorChanged.emit(this.color) 来发射 colorChanged 事件。
现在，我们可以在 HTML 中使用 [color] 和 (colorChanged) 属性来设置和监听 color 属性。
<div [changeColor] [color]="'green'" (colorChanged)="onColorChanged($event)">Hello, Angular!</div>
在这个例子中，我们将 color 属性设置为 'green'，并在 colorChanged 事件触发时调用 onColorChanged 方法。
使用 HostListener 和 HostBinding 装饰器
除了接受输入和输出，directive 还可以监听宿主元素的事件和绑定宿主元素的属性。Angular 提供了 @HostListener 和 @HostBinding 装饰器来帮助我们监听事件和绑定属性。
-- -------------------- ---- -------
------ - ---------- ----------- ------------- ----------- - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
------------------------------------- ---------------- -------
------------------- --- ----------- --
--------------------------- -------------- -
-------------------- - ------
-
--------------------------- -------------- -
-------------------- - ---------
-
-在这个例子中，我们使用 @HostBinding('style.backgroundColor') 来绑定宿主元素的 backgroundColor 属性。我们还使用 @HostListener('mouseenter') 和 @HostListener('mouseleave') 来监听宿主元素的 mouseenter 和 mouseleave 事件，并改变宿主元素的背景颜色。
现在，我们可以在 HTML 中使用 [changeColor] 属性来应用这个 directive。
<div [changeColor]>Hello, Angular!</div>
当鼠标移动到这个元素上时，它的背景颜色会变成红色，当鼠标离开这个元素时，它的背景颜色会变成黄色。
总结
在这篇文章中，我们学习了如何在 Angular 中使用 directive 自定义指令。我们创建了一个简单的 directive，接受了输入和输出，并监听了宿主元素的事件和绑定了宿主元素的属性。希望这篇文章对你有所帮助，让你更好地理解 Angular 中的 directive。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661938d3d10417a222a1393e