Angular指令点击子元素切换宿主CSS类失效问题求助

我想开发一个具备以下功能的Angular指令：

• 获取指令所在元素的最后一个子元素
• 为该子元素（按钮）添加点击事件监听器
• 点击时切换一个布尔值
• 根据该布尔值为宿主元素添加CSS类

当前实现思路：用@ContentChild获取按钮，实现AfterViewInit接口，在ngAfterViewInit()中为按钮绑定toggleMenu点击事件，通过@HostBinding绑定布尔值来控制CSS类。

遇到的问题：点击事件触发后，控制台打印的布尔值确实变化了，但宿主元素并没有添加上目标CSS类。代码如下：

export class ToggleSidemenuDirective implements AfterViewInit {
  @ContentChild('toggleBtn') element: ElementRef;
  private btn: HTMLBodyElement;

  ngAfterViewInit(): void {
    this.btn = this.element.nativeElement;
    this.btn.addEventListener('click', this.toggleMenu);
  }

  @HostBinding("class.sidemenu-toggled") toggled = true;

  private toggleMenu(){
    this.toggled = !this.toggled;
    console.log(this.toggled)
  }
}

问题核心是**this的指向错误**：当用addEventListener绑定toggleMenu方法时，方法内部的this指向的是触发点击的按钮元素（btn），而不是指令类的实例。你修改的toggled其实是按钮元素上的临时属性，并不是指令里绑定@HostBinding的那个toggled，所以Angular无法检测到变化，自然不会更新宿主元素的CSS类。

可以通过以下几种方式修复：

方法1：使用箭头函数保留this指向 #

把事件回调改成箭头函数，这样this会指向指令实例：

ngAfterViewInit(): void {
  this.btn = this.element.nativeElement;
  this.btn.addEventListener('click', () => this.toggleMenu());
}

方法2：用bind显式绑定this #

通过bind方法把this强制绑定到指令实例：

ngAfterViewInit(): void {
  this.btn = this.element.nativeElement;
  this.btn.addEventListener('click', this.toggleMenu.bind(this));
}

方法3：改用Angular风格的事件绑定（推荐） #

如果按钮是通过模板引用变量#toggleBtn获取的，其实可以直接在模板里给按钮绑定点击事件，更符合Angular的习惯，也避免了手动处理事件监听和this的问题：

<!-- 在宿主元素的模板中 -->
<button #toggleBtn (click)="toggleMenu()">切换菜单</button>

然后指令里不需要手动添加事件监听，直接保留toggleMenu方法即可：

export class ToggleSidemenuDirective {
  @HostBinding("class.sidemenu-toggled") toggled = true;

  toggleMenu(){
    this.toggled = !this.toggled;
    console.log(this.toggled)
  }
}

另外注意，手动添加的事件监听记得在指令销毁时移除，避免内存泄漏：

export class ToggleSidemenuDirective implements AfterViewInit, OnDestroy {
  @ContentChild('toggleBtn') element: ElementRef;
  private btn: HTMLBodyElement;
  private clickHandler: () => void;

  ngAfterViewInit(): void {
    this.btn = this.element.nativeElement;
    this.clickHandler = () => this.toggleMenu();
    this.btn.addEventListener('click', this.clickHandler);
  }

  ngOnDestroy(): void {
    if(this.btn && this.clickHandler) {
      this.btn.removeEventListener('click', this.clickHandler);
    }
  }

  @HostBinding("class.sidemenu-toggled") toggled = true;

  private toggleMenu(){
    this.toggled = !this.toggled;
    console.log(this.toggled)
  }
}

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