在 Angular 中，我们经常需要对元素的事件及属性进行处理。这些事件可能是鼠标点击、滚动等用户交互行为，属性可能是标签、样式等与界面呈现相关的数据。
本文将介绍如何使用 Angular 中的 HostListener 和 HostBinding 处理元素的事件及属性变化。在实际的开发中，对于这些功能的掌握以及在合适的场景中的运用，都是我们前端开发人员非常有必要掌握的技能。
HostListener
我们先来看 HostListener 的使用。HostListener 是 Angular 中的装饰器，用于在组件类中为宿主元素添加事件监听。
首先，需要借助 @HostListener 声明器，将事件中的逻辑函数传入 Angular 框架中，使其能够响应我们绑定的事件。下面是一个简单的绑定事件的示例：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- -------------
--------- ------------------------
--
------ ----- --------------- -
---------------------- --------- -
------------------- ----------
-
-在这个示例中，我们使用 @HostListener 声明器将点击事件绑定到组件宿主元素上，即按钮元素。当用户点击按钮时，Angular 将会调用这个事件监听器，并输出一条信息到控制台上。
当然，除了 click 事件外，还可以绑定其他事件，例如 mouseover、scroll 和 keydown 等事件。
@HostListener('scroll', ['$event'])
onScroll(event) {
console.log('Scrolled');
}在这个示例中，我们使用 @HostListener 声明器将滚动事件绑定到组件宿主元素上，在滚动发生时将触发打印输出。
需要注意的是，同样的事件可以绑定多个事件监听器，并且最终的处理顺序是按照依次绑定的顺序进行的。下面的示例中，我们绑定了两个滚动事件监听器，分别输出当次事件的发生时间及元素滚动距离。
-- -------------------- ---- ------- ----------------------- ----------- --------------------- - ------------------- ------- ----- ----------------- - ----------------------- ----------- ------------------------ - --------------------- ----------- ------------------------ -
HostBinding
除了事件监听外，我们还需要掌握 HostBinding 作为元素属性变化的处理方法。HostBinding 装饰器主要用于将 Angular 组件中的属性值绑定到宿主元素上。
下面的示例中，我们使用 @HostBinding 来设置元素的 class 和 style 属性，当组件属性值改变时，Angular 将会立即更新样式，将其反映到界面上。
-- -------------------- ---- ------- ------ - ---------- ----------- - ---- ---------------- ------------ --------- ----------- --------- -------- -- ---- ----------- -- ------ ----- ------------- - ---------------------------- ----------- - ----- --------------------------- --------- - ------ ---- - -------- -
当 activeClass 的值为 true 时，Angular 将为宿主元素添加 active 样式类；当 textColor 属性值为 red 时，Angular 将为宿主元素添加样式 "color: red;"。这些样式及属性都可以通过 HostBinding 进行动态绑定，从而实现更加复杂的交互设计和视觉效果。
总结：
通过本文的介绍，我们了解了 Angular 中的 HostListener 和 HostBinding 这两个重要的装饰器，分别用于处理元素的事件及属性变化。针对一些常见的场景（如鼠标滚动或元素样式变化等），我们还有可以直接使用的模板指令（如 @HostListener 和 @HostBinding），用来简化代码编写。在今后的前端开发工作中，我们可以充分运用 Angular 提供的这些机制，提高我们的工作效率，实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647178dd968c7c53b0f561f7