Angular中如何在addEventListener添加的事件处理函数内访问组件本地变量？

普通类方法作为引用被传递到其他执行场景时，JavaScript 不会自动保留方法定义时的类实例上下文。你直接把handleDocumentClick的方法引用传给document.addEventListener时，该方法就脱离了当前组件实例的绑定关系。当document触发click事件执行这个处理函数时，浏览器会按照事件回调的默认规则，把函数内部的this指向触发事件的document对象，而非HamburgerMenuComponent组件实例，因此无法访问到组件上定义的localString属性。

同时这种写法还有隐藏问题：如果后续不做上下文修正，哪怕你在ngOnDestroy里调用removeEventListener，因为处理函数的上下文不对，整个事件逻辑从执行开始就是错的。

• 方案1：将事件处理方法改为箭头函数形式的类属性（日常开发最推荐）
  原理：箭头函数没有独立的this指向，会捕获定义位置所在的执行上下文，也就是当前组件实例。无论这个方法的引用被传递到哪个执行环境，内部的this永远指向组件本身，不会出现上下文丢失的问题。
  修改后的核心代码：

  export class HamburgerMenuComponent implements OnInit, OnDestroy {
    localString = 'hello';
  
    ngOnInit(): void {
      document.addEventListener('click', this.handleDocumentClick);
    }
  
    // 箭头函数定义的类属性，自动绑定组件实例上下文
    handleDocumentClick = ($event: MouseEvent): void => {
      console.log(this.localString); // 可正常输出 'hello'
    }
  
    ngOnDestroy(): void {
      // 因函数引用未变化，监听器可正常移除
      document.removeEventListener('click', this.handleDocumentClick);
    }
  }
  

• 方案2：手动绑定函数上下文并存储统一引用
  原理：通过bind()方法强制将处理函数的this绑定为当前组件实例，同时把绑定后的函数引用存在组件类中，保证绑定监听和移除监听使用的是同一个函数引用，避免出现监听器无法移除的内存泄漏问题。
  修改后的核心代码：

  export class HamburgerMenuComponent implements OnInit, OnDestroy {
    localString = 'hello';
    // 存储绑定好上下文的事件处理函数引用
    private boundClickHandler = this.handleDocumentClick.bind(this);
  
    ngOnInit(): void {
      document.addEventListener('click', this.boundClickHandler);
    }
  
    handleDocumentClick($event: MouseEvent): void {
      console.log(this.localString);
    }
  
    ngOnDestroy(): void {
      document.removeEventListener('click', this.boundClickHandler);
    }
  }
  

  避坑提示：不要直接在addEventListener的参数里写($event) => this.handleDocumentClick($event)这种内联箭头函数，这种写法每次执行都会生成全新的函数引用，ngOnDestroy阶段根本无法匹配到之前绑定的监听器，会造成内存泄漏。

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