在Angular指令中用ElementRef获取子元素，是否有更优的Angular式实现？

你当前的指令功能正常，但直接使用querySelector确实不符合Angular的声明式编程理念——它强依赖DOM类名，一旦模板结构或类名变更，指令就会失效，且绕过了Angular的变更检测机制。以下是针对Angular 16的两种优化方案：

方案一：用@ContentChild获取目标元素（低侵入式改造） #

通过Angular的@ContentChild装饰器，直接从指令宿主的内容子元素中获取目标DOM节点，无需手动查询DOM，更符合Angular组件/指令的设计规范。

优化后代码 #

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

@Directive({
  selector: "[sideNavToggler]"
})
export class SidenavtogglerDirective implements AfterViewInit {
  // 通过类选择器获取内容子元素的ElementRef
  @ContentChild('.menu__box', { read: ElementRef }) 
  private sideNavRef?: ElementRef<HTMLElement>;
  
  @ContentChild('.menu__btn', { read: ElementRef }) 
  private burgerButtonRef?: ElementRef<HTMLElement>;

  private sideNav?: HTMLElement;
  private burgerButton?: HTMLElement;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit(): void {
    this.sideNav = this.sideNavRef?.nativeElement;
    this.burgerButton = this.burgerButtonRef?.nativeElement;
  }

  @HostListener('click') toggleOpenClass(){
    if (!this.sideNav || !this.burgerButton) return;

    // 切换菜单类
    const isSideNavOpen = this.sideNav.classList.contains('open');
    isSideNavOpen 
      ? this.renderer.removeClass(this.sideNav, 'open') 
      : this.renderer.addClass(this.sideNav, 'open');

    // 切换按钮类
    const isButtonActive = this.burgerButton.classList.contains('active');
    isButtonActive 
      ? this.renderer.removeClass(this.burgerButton, 'active') 
      : this.renderer.addClass(this.burgerButton, 'active');
  }
}

优势 #

• 无需修改现有模板结构，保持指令的封装性
• 依赖Angular的视图查询机制，自动适配模板变更（如动态元素）

方案二：用Angular信号+声明式绑定（Angular 16推荐方案） #

完全遵循Angular的声明式编程思路，通过信号管理菜单状态，模板直接绑定状态来控制类名，彻底避免手动操作DOM。

优化后代码 #

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

@Directive({
  selector: "[sideNavToggler]",
  exportAs: 'sideNavToggler' // 暴露指令实例给模板引用
})
export class SidenavtogglerDirective {
  // 用Angular 16信号管理菜单展开状态
  isOpen = signal(false);

  @HostListener('click') toggleOpenClass(){
    this.isOpen.update(prev => !prev);
  }
}

模板使用示例 #

<!-- 用模板引用变量获取指令实例 -->
<div #toggler="sideNavToggler" sideNavToggler>
  <button class="menu__btn" [class.active]="toggler.isOpen()">
    <!-- 汉堡图标 -->
  </button>
  <div class="menu__box" [class.open]="toggler.isOpen()">
    <!-- 菜单内容 -->
  </div>
</div>

优势 #

• 代码极简，完全符合Angular 16的信号式编程趋势
• 状态与视图完全绑定，Angular自动处理变更检测
• 彻底解除指令对DOM结构的依赖，维护性大幅提升

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