如何在指令中访问 nativeElement 中的悬停和活动属性

在 Angular 中，指令是一种可重用的组件，用于向 HTML 元素添加行为。在某些情况下，您可能需要访问 HTML 元素的悬停和活动属性。本文将向您展示如何在指令中访问这些属性。

悬停属性

悬停属性可以帮助您在鼠标悬停在元素上时添加样式或触发其他行为。在指令中访问 HTML 元素的悬停属性非常简单。您可以在指令构造函数中注入 ElementRef，然后使用其 nativeElement 属性访问元素。

以下是一个简单的指令示例，它将背景颜色更改为黄色，当鼠标悬停在该元素上时：

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

@Directive({
  selector: '[appHighlightOnHover]'
})
export class HighlightOnHoverDirective {

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = null;
  }

}

在这个例子中，我们使用了 @HostListener 装饰器来监听 mouseenter 和 mouseleave 事件，并在事件发生时更改元素的背景颜色。

请注意，在第一个 @HostListener 方法中，我们使用 this.el.nativeElement 访问元素。这是因为在构造函数中注入的 ElementRef 中包含一个名为 nativeElement 的属性，该属性表示指令所附加到的元素。

活动属性

活动属性表示一个 HTML 元素是否是当前操作系统窗口中的活动元素。当一个元素是活动元素时，它会突出显示，并且用户输入将发送到该元素。

要访问 HTML 元素的活动属性，您需要使用 window 对象的 activeElement 属性。因为 window 对象不是 Angular 服务，所以您需要在指令构造函数中注入 @Inject 装饰器构造的令牌。

以下是一个简单的指令示例，它将在元素被选中时控制台记录一条消息：

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

export const WINDOW = new InjectionToken('WindowToken');

@Directive({
  selector: '[appLogOnFocus]'
})
export class LogOnFocusDirective {

  constructor(
    private el: ElementRef,
    @Inject(WINDOW) private window: Window
  ) { }

  @HostListener('focus') onFocus() {
    if (this.el.nativeElement === this.window.document.activeElement) {
      console.log('Element is active');
    }
  }

}

在这个例子中，我们使用了 @Inject 装饰器来注入一个名为 WINDOW 的令牌，这个令牌可以用于访问全局 window 对象。然后，我们使用 @HostListener 装饰器来监听元素的 focus 事件，并检查当前活动元素是否是该元素。

请注意，在 onFocus 方法中，我们使用了 this.el.nativeElement 和 this.window.document.activeElement 来访问元素和当前活动元素。

总结

访问指令所附加的 HTML 元素的悬停和活动属性很容易。您可以使用 ElementRef 来访问元素，使用 @HostListener 装饰器来监听事件。要访问活动元素，请使用全局 window 对象和 activeElement 属性。