Angular 2：如何为点击的<h1>的最近.has-dropdown元素切换类？

你的核心需求是点击

方法一：修改现有指令（推荐，可复用） #

我们可以通过ElementRef获取宿主元素（

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

@Directive({
  selector: '[DropdownDirective]'
})
export class DropdownDirective {
  constructor(private el: ElementRef) {}

  @HostListener('click') toggleOpen() {
    // 从当前<h1>向上查找第一个带.has-dropdown类的元素
    const dropdownContainer = this.el.nativeElement.closest('.has-dropdown');
    if (dropdownContainer) {
      // 切换has-open类
      dropdownContainer.classList.toggle('has-open');
    }
  }
}

为什么这样可行？ #

• ElementRef让我们能访问指令宿主的原生DOM元素（也就是绑定了DropdownDirective的
  ）
• closest('.has-dropdown')会从当前元素开始向上遍历DOM树，找到第一个匹配选择器的祖先元素，完美对应你的需求
• classList.toggle()会自动添加/移除目标类，实现切换效果

你的组件模板无需修改，保持原来的结构即可：

<div class="nav-item has-dropdown">
  <h1 DropdownDirective>Click Me </h1>
</div>

方法二：组件内直接处理（适合单一场景） #

如果这个下拉逻辑只在当前组件中使用，也可以不用指令，直接在组件里通过模板引用变量实现：

组件模板 #

<div class="nav-item has-dropdown" #dropdownRef>
  <h1 (click)="toggleDropdown(dropdownRef)">Click Me </h1>
</div>

组件类 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  toggleDropdown(dropdownEl: HTMLElement) {
    dropdownEl.classList.toggle('has-open');
  }
}

这种方式更直接，不需要额外创建指令，但复用性不如指令方案。

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