Question

我有一个弹出组件，其模板是可移动的。调用open()方法并附加可移动侦听器时，弹出窗口会打开;然后在调用close()方法但听众没有删除时关闭。这些是在班级：

@Output()
open() {
    const div = this.someDiv.nativeElement;
    div.addEventListener('mousedown', this.move.mouseDown.bind(this), false);
    div.addEventListener('touchstart', this.move.touchStart.bind(this), false);
    document.addEventListener('mousemove', this.move.mouseMove.bind(this), false);
    document.addEventListener('touchmove', this.move.touchMove.bind(this), false);
    document.addEventListener('mouseup', this.move.mouseUp.bind(this), false);
    document.addEventListener('touchEnd', this.move.touchEnd.bind(this), false);
    this.display = 'block';
}

@Output()
close() {
    const div = this.someDiv.nativeElement;
    div.removeEventListener('mousedown', this.move.mouseDown.bind(this), false);
    div.removeEventListener('touchstart', this.move.touchStart.bind(this), false);
    document.removeEventListener('mousemove', this.move.mouseMove.bind(this), false);
    document.removeEventListener('touchmove', this.move.touchMove.bind(this), false);
    document.removeEventListener('mouseup', this.move.mouseUp.bind(this), false);
    document.removeEventListener('touchEnd', this.move.touchEnd.bind(this), false);
    this.display = 'none';
}

效果很好;但是，即使我试图引用相同的功能，删除听众也是行不通的。如何在此上下文中删除侦听器？

P.S。我确信这是一个更好的方式来注册文档事件，这也有助于了解。

Answer 1

虽然新的重写方法可能能够使用@HostListener Angular方法，但问题在于使用原生JavaScript .bind()原型方法。

bind（）方法创建一个新函数... Function.prototype.bind()

换句话说，使用bind就像使用匿名函数一样，提供this上下文 - 意味着您不是引用原始对象，而是新创建的函数。所以，虽然我认为我明确地指向同一个对象，所以我可以删除监听器，当使用bind时，我必须创建对相关对象的引用并首先预先绑定它，然后指向前绑定参考：

private moveMD = this.move.mouseDown.bind(this);
private moveTS = this.move.touchStart.bind(this);
private moveMM = this.move.mouseMove.bind(this);
private moveTM = this.move.touchMove.bind(this);
private moveMU = this.move.mouseUp.bind(this);
private moveTE = this.move.touchEnd.bind(this);

@Output()
open() {
    const div = this.someDiv.nativeElement;
    div.addEventListener('mousedown', this.moveMD, false);
    div.addEventListener('touchstart', this.moveTS, false);
    document.addEventListener('mousemove', this.moveMM, false);
    document.addEventListener('touchmove', this.moveTM, false);
    document.addEventListener('mouseup', this.moveMU, false);
    document.addEventListener('touchEnd', this.moveTE, false);
    this.display = 'block';
}

@Output()
close() {
    const div = this.someDiv.nativeElement;
    div.removeEventListener('mousedown', this.moveMD, false);
    div.removeEventListener('touchstart', this.moveTS, false);
    document.removeEventListener('mousemove', this.moveMM, false);
    document.removeEventListener('touchmove', this.moveTM, false);
    document.removeEventListener('mouseup', this.moveMU, false);
    document.removeEventListener('touchEnd', this.moveTE, false);
    this.display = 'none';
}

在构造函数外部的Angular 2中添加和删除文档侦听器

1 个答案: