Question

我需要在触发后立即删除wheel事件清单。我尝试了以下但不删除eventlistener。

export class HomeComponent implements OnInit {

    constructor() {}

    ngOnInit() {
       document.querySelector("#section-one").addEventListener("wheel", () => this.myFunction1(), true);
    }

    myFunction1() {
      alert();
      document.querySelector("#section-one").removeEventListener("wheel", this.myFunction1, true);
      console.log("Done!");
    }
}

有什么建议吗？

Answer 1

根据the docs：

使用不标识any的参数调用removeEventListener（）当前在EventTarget上注册的EventListener无效。

你的代码不应该工作。

可能的修复方法如下：

wheelHandler: any;

ngOnInit() {
    this.wheelHandler = this.myFunction1.bind(this);
    document.querySelector("#section-one").addEventListener("wheel", this.wheelHandler, true);
}

myFunction1() {
    alert();
    document.querySelector("#section-one").removeEventListener("wheel", this.wheelHandler, true);
    console.log("Done!");
}

其中wheelHandler是一个引用处理程序

的相同实例的函数

有关更多角度方式的解决方案，请参阅

How to listen for mousemove event on Document object in Angular

但尚不支持AFAIK useCapture参数。所以它总是false

Answer 2

您可以使用HostListener装饰器绑定事件侦听器，但这仅适用于host元素。如果要为子元素添加和删除侦听器，则必须使用Renderer2.listen方法。它返回一个删除事件监听器的函数。

@Component( {
  template: '<div #sectionOne></div>'
})
export class myComponent {
  private _listeners = [];

  @ViewChild('sectionOne')
  public section: ElementRef<any>;

  constructor(private _renderer: Renderer2) {}

  ngAfterViewInit() {
    this._listeners.push(
      this._renderer.listen(this.section.nativeElement, 'click', this.handler.bind(this))
    );
  }

  ngOnDestroy() {
    this._listeners.forEach(fn => fn());
  }

  public handler() {
  }
}

现在，角度不支持useCapture参数。有关详细信息，请参阅此issue。

Answer 3

问题可能是当你使用类方法作为回调函数时，this不再指向回调函数中的类。

请使用此代码添加您的事件监听器：

document.querySelector("#section-one")
  .addEventListener("wheel", () => this.myFunction1(), true);

请注意，this.myFunction1已成为() => this.myFunction1()。换句话说，我将回调函数的名称包含在lambda中。

删除侦听器的代码保持不变：

document.querySelector("#section-one").removeEventListener("wheel", this. myFunction1, true);

最后，最重要的是，为什么要使用这样的事件监听器？这绝对不是Angular方式。

如何删除角度4中的EventListeners

3 个答案: