Angular指令中moveImage方法this指向异常，功能失效求助排查

你把moveImage方法直接作为事件监听器传递给addEventListener时，函数的this会被自动绑定到触发事件的DOM元素（也就是originalImage或secondImage），而不是你的ImgTest指令实例。这就导致在moveImage里调用this.getPos()时，this指向的是DOM元素，自然找不到这个方法，功能直接失效。

有两种常用的修复方式：

方法1：在构造函数中绑定this #

在类的构造函数里，把moveImage方法的this强制绑定到指令实例，这样不管怎么调用这个方法，this都固定指向类实例：

constructor(private elementRef: ElementRef, public sanitizer: DomSanitizer) {
  // 绑定this到当前类实例
  this.moveImage = this.moveImage.bind(this);
}

原有的addEventListeners和removeEventListeners代码无需修改，直接使用this.moveImage即可。

方法2：使用箭头函数作为事件处理器（需保存引用用于移除） #

箭头函数会自动捕获外层上下文的this（也就是指令实例），但要注意：如果直接在addEventListener里写(e) => this.moveImage(e)，移除事件时必须使用同一个函数引用，所以需要先把这个箭头函数存起来：

// 类里新增属性保存箭头函数引用
private moveImageHandler: (e: MouseEvent) => void;

ngAfterViewInit(): void {
  this.originalImage = this.elementRef.nativeElement;
  // 初始化箭头函数，捕获当前类的this
  this.moveImageHandler = (e) => this.moveImage(e);
}

private addEventListeners(): void {
  this.originalImage.addEventListener('mousemove', this.moveImageHandler);
  this.secondImage.addEventListener('mousemove', this.moveImageHandler);
}

private removeEventListeners(): void {
  this.originalImage.removeEventListener('mousemove', this.moveImageHandler);
  this.secondImage.removeEventListener('mousemove', this.moveImageHandler);
}

这样添加和移除的是同一个函数引用，既不会出现移除失效的问题，同时moveImage里的this也能正确指向指令实例。

额外注意 #

不管用哪种方法，都要确保在ngOnDestroy里正确移除事件监听器，避免内存泄漏，你当前的removeEventListeners逻辑是对的，只要保证移除的函数和添加的是同一个即可。

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