Angular自定义指令如何操作其他元素？hover显示隐藏div问题

你的核心问题是当前自定义指令仅能操作绑定它的宿主元素，需要调整为操作目标隐藏元素，以下是两种可行的修改方案：

方法一：直接操作兄弟元素（适合固定结构场景） #

如果隐藏div始终是可见div的下一个兄弟元素，可以在指令中直接获取该兄弟元素并控制其显示状态。

修改后的HTML代码 #

<div appCustomlang>Visible</div>
<!-- 给隐藏div添加初始隐藏样式 -->
<div style="display: none;">Invisible</div>

修改后的指令代码 #

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

@Directive({
  selector: '[appCustomlang]',
})
export class CustomlangDirective {
  private targetElement: HTMLElement | null;

  constructor(private elm: ElementRef) {
    // 初始化时获取宿主元素的下一个兄弟元素
    this.targetElement = this.elm.nativeElement.nextElementSibling as HTMLElement;
  }

  @HostListener('mouseover') onMouseOver() {
    if (this.targetElement) {
      this.targetElement.style.display = 'block';
    }
  }

  @HostListener('mouseout') onMouseOut() {
    if (this.targetElement) {
      this.targetElement.style.display = 'none';
    }
  }
}

方法二：通过@Input传递目标元素（灵活适配任意结构） #

如果隐藏元素的位置不固定，可通过模板引用变量将目标元素传递给指令，实现更灵活的控制。

修改后的HTML代码 #

<!-- 将目标元素的引用传递给指令 -->
<div [appCustomlang]="targetDiv">Visible</div>
<!-- 给隐藏div添加模板引用变量和初始隐藏样式 -->
<div #targetDiv style="display: none;">Invisible</div>

修改后的指令代码 #

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

@Directive({
  selector: '[appCustomlang]',
})
export class CustomlangDirective {
  // 通过Input接收外部传入的目标元素引用
  @Input('appCustomlang') targetElement!: HTMLElement;

  @HostListener('mouseover') onMouseOver() {
    this.targetElement.style.display = 'block';
  }

  @HostListener('mouseout') onMouseOut() {
    this.targetElement.style.display = 'none';
  }
}

内容的提问来源于stack exchange，提问作者Bahy Mohamed