@HostListener 与 @HostBinding 有什么用？

Question

在 Angular 中， @HostListener 和 @HostBinding 都是用于与宿主元素（host element）进行交互的装饰器。它们通常用于自定义指令或组件中，用来操作宿主元素的事件或属性。虽然它们都与宿主元素的交互相关，但用途有所不同。

1. @HostListener

@HostListener 用于监听宿主元素上的事件，并在事件触发时执行指定的回调函数。它通常用于处理用户输入、点击、滚动等浏览器事件。

主要作用：

• 监听宿主元素的事件并调用指定的处理方法。

用法：

@HostListener 装饰器接受两个参数：

• 第一个参数是事件类型（例如 'click' 、 'mouseenter' ）。
• 第二个参数是可选的，表示事件处理方法的参数。

示例：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appHover]'
})
export class HoverDirective {

  @HostListener('mouseenter') onMouseEnter() {
    console.log('Mouse entered!');
  }

  @HostListener('mouseleave') onMouseLeave() {
    console.log('Mouse left!');
  }
}

在这个示例中， @HostListener 监听宿主元素（即应用该指令的元素）上的 mouseenter 和 mouseleave 事件。当用户将鼠标移入或移出该元素时，分别触发 onMouseEnter 和 onMouseLeave 方法。

其他例子：

@HostListener('window:scroll', ['$event'])
onWindowScroll(event: Event) {
  console.log('Window scrolled:', event);
}

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
  console.log('Document clicked!', event);
}

2. @HostBinding

@HostBinding 用于将一个组件或指令的属性绑定到宿主元素的属性、类、样式等上。它可以让你动态地修改宿主元素的属性或样式。

主要作用：

• 将组件或指令的属性绑定到宿主元素的属性、类或样式上。

用法：

@HostBinding 装饰器用于将组件类中的某个属性绑定到宿主元素的属性或类。你可以绑定宿主元素的属性、类、样式等。

示例：

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @HostBinding('style.backgroundColor') backgroundColor: string = 'yellow';
  @HostBinding('class.highlighted') isHighlighted: boolean = true;
}

在这个例子中， @HostBinding 将 backgroundColor 属性绑定到宿主元素的 style.backgroundColor ，并将 isHighlighted 属性绑定到宿主元素的 class.highlighted 。这意味着，当 backgroundColor 或 isHighlighted 改变时，宿主元素的背景色或类名会自动更新。

绑定宿主元素的属性：

@HostBinding('attr.disabled') isDisabled = true;  // 绑定到元素的 `disabled` 属性

绑定宿主元素的样式：

@HostBinding('style.color') textColor = 'red';  // 绑定到元素的 `style.color`

@HostListener 与 @HostBinding 的区别

特性	@HostListener	@HostBinding
功能	监听宿主元素的事件，并执行回调方法。	绑定组件/指令的属性到宿主元素的属性、样式或类等。
使用场景	用于响应宿主元素上的用户交互或其他事件。	用于动态地修改宿主元素的属性、样式或类等。
参数	事件名称（如 'click' ）和可选的参数（如 $event ）。	绑定宿主元素的属性、类、样式等。
修改宿主元素	不直接修改宿主元素的属性或样式，只响应事件并执行代码。	直接修改宿主元素的属性、样式或类等。
典型用法	监听用户的点击、滚动、鼠标悬停等事件。	修改宿主元素的样式、类、属性，通常用于动态更新宿主元素。

示例：结合使用 @HostListener 和 @HostBinding

你可以结合这两个装饰器来更方便地操作宿主元素。例如，创建一个指令来监听鼠标悬停事件，并动态更改宿主元素的背景色。

import { Directive, HostListener, HostBinding } from '@angular/core';

@Directive({
  selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {

  // 将背景色绑定到宿主元素的 style.backgroundColor
  @HostBinding('style.backgroundColor') backgroundColor: string;

  // 监听鼠标进入和离开事件
  @HostListener('mouseenter') onMouseEnter() {
    this.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.backgroundColor = 'transparent';
  }
}

在这个示例中， @HostListener 监听了宿主元素的 mouseenter 和 mouseleave 事件，而 @HostBinding 用来绑定背景颜色的样式，从而在用户将鼠标悬停到元素上时动态更改背景色。

总结：

• @HostListener 用于监听宿主元素上的事件。
• @HostBinding 用于将组件或指令的属性绑定到宿主元素的属性、样式或类。

这两个装饰器在创建动态交互式组件或指令时非常有用，能够让你轻松处理宿主元素的事件和属性。