在 Angular 中，指令是一个可重用的组件，它可以被应用到一个 DOM 元素上，从而改变它的行为或外观。指令可以被用于许多场景，例如表单验证、事件监听、动态样式等等。本文将介绍如何使用 Angular 中的 @HostListener 和 @HostBinding 装饰器来对指令进行装饰，以及如何在实际开发中使用它们。
@HostListener 装饰器
@HostListener 装饰器用于将一个事件监听器绑定到宿主元素上。它有两个参数：事件名称和可选的参数配置。示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
---------------------- ------------------
--------------- -
-------------------- -- --------------------
-
-在上面的代码中，我们定义了一个名为 MyDirective 的指令，并使用 @HostListener 装饰器将一个 click 事件监听器绑定到宿主元素上。当点击宿主元素时，onClick 方法将被调用，并打印出点击的元素的标签名。
@HostListener 装饰器还支持传递参数，这些参数可以在方法中使用。例如，我们可以将鼠标事件的坐标传递给方法：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
-------------------------- ------------------ ------------------
-------------- -- -
------------------ ----- -- ------ --------
-
-在上面的代码中，我们使用 @HostListener 装饰器将一个 mousemove 事件监听器绑定到宿主元素上。当鼠标移动时，onMouseMove 方法将被调用，并打印出鼠标坐标。
@HostBinding 装饰器
@HostBinding 装饰器用于将一个属性绑定到宿主元素上。它有一个参数：属性名称。示例代码如下：
-- -------------------- ---- -------
------ - ---------- ----------- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
----------------------------
-------- - ------
-------------- -
------------- - ---------------
-
-在上面的代码中，我们定义了一个名为 MyDirective 的指令，并使用 @HostBinding 装饰器将一个名为 isActive 的属性绑定到宿主元素上的 class 属性。当 isActive 的值为 true 时，宿主元素将添加 active 类；当 isActive 的值为 false 时，宿主元素将移除 active 类。
我们还定义了一个 toggleActive 方法，用于切换 isActive 的值。当我们调用 toggleActive 方法时，isActive 的值将被改变，从而改变宿主元素的 class 属性。
@HostBinding 装饰器还支持传递参数，这些参数可以在方法中使用。例如，我们可以将宿主元素的样式绑定到一个变量：
-- -------------------- ---- -------
------ - ---------- ----------- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
-------------------------------------
--------------- - ------
------------------ -
-------------------- - ------
-
-在上面的代码中，我们使用 @HostBinding 装饰器将一个名为 backgroundColor 的属性绑定到宿主元素上的 style.backgroundColor 属性。当 backgroundColor 的值为 red 时，宿主元素的背景色为红色。
我们还定义了一个 changeColor 方法，用于改变 backgroundColor 的值。当我们调用 changeColor 方法时，backgroundColor 的值将被改变，从而改变宿主元素的背景色。
实际应用
在实际开发中，我们可以使用 @HostListener 和 @HostBinding 装饰器来实现许多功能。例如，我们可以使用 @HostListener 装饰器监听宿主元素的键盘事件，从而实现快捷键功能；我们可以使用 @HostBinding 装饰器绑定宿主元素的样式，从而实现动态样式功能。
下面是一个示例代码，演示了如何使用 @HostListener 和 @HostBinding 装饰器实现一个简单的计数器功能：
-- -------------------- ---- -------
------ - ---------- ------------- ----------- - ---- ----------------
------------
--------- -----------
--
------ ----- ---------------- -
------- ----- - --
----------------------------
-------- - ------
-------------------------------
--- ------------- -
------ ----------------------
-
----------------------
--------- -
-------------
------------- - -----
------------- -- -
------------- - ------
-- -----
-
-在上面的代码中，我们定义了一个名为 CounterDirective 的指令，并使用 @HostListener 装饰器将一个 click 事件监听器绑定到宿主元素上。当点击宿主元素时，onClick 方法将被调用，并将计数器加 1，同时将 isActive 的值设为 true，从而添加 active 类；500 毫秒后，将 isActive 的值设为 false，从而移除 active 类。
我们还使用 @HostBinding 装饰器将 isActive 属性绑定到宿主元素上的 class 属性，将计数器的值绑定到宿主元素上的 data-count 属性。当 isActive 的值为 true 时，宿主元素将添加 active 类；当计数器的值发生改变时，宿主元素的 data-count 属性将被更新。
总结
@HostListener 和 @HostBinding 装饰器是 Angular 中非常有用的装饰器，它们可以让我们更轻松地对指令进行装饰。在实际开发中，我们可以使用它们来实现许多功能，例如快捷键功能、动态样式功能等等。希望本文能够对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d63d7d3423812e4b6a91b