当我们开发 Angular 应用时，可能需要监听一些 DOM 事件，例如点击事件、鼠标移动事件等。在 Angular 中，我们可以使用 @HostListener 装饰器来实现 DOM 事件的监听。
什么是 @HostListener 装饰器？
@HostListener 装饰器是 Angular 提供的一个装饰器，用来监听 DOM 事件。该装饰器需要传入两个参数，分别为要监听的事件类型和回调函数。
如何使用 @HostListener 装饰器？
假设我们需要监听一个按钮的点击事件，可以在组件中添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
---------------------- -----------
-------------- ----------- -
------------------- ---------- -------
-
-在上面的代码中，我们使用 @HostListener 装饰器来监听按钮的点击事件。由于我们监听的是 click 事件，所以第一个参数为 'click'。第二个参数是一个数组，用来传递事件对象。在回调函数中，我们可以打印事件对象来了解事件细节。
需要注意的问题
在使用 @HostListener 装饰器时，需要注意以下几点：
第一个参数为事件类型，可以是字符串形式，也可以是事件对象。例如，可以使用 MouseEvent 类型来监听鼠标事件。
第二个参数是一个数组，用来传递事件对象。在回调函数中需要使用该参数来获取事件对象。
回调函数的参数类型需要与第二个参数保持一致。
如果事件类型为自定义事件，需要在组件中使用 @NgModule 装饰器声明事件。
总结
通过本文，我们了解了如何使用 @HostListener 装饰器在 Angular 中监听 DOM 事件，并提供了一个简单的示例代码。在实际开发中，我们可以利用该装饰器实现更加复杂和实用的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6649048841e98942febd4