Javascript 如何删除angular 4中的EventListeners

我需要在轮子启动后立即移除它。我尝试了以下操作，但没有删除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!");
    }
}

@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() {
  }
}

---

有什么建议吗？

问题可能是，当您将类方法用作回调函数时，

此

不再指向回调函数中的类

改为使用以下代码添加事件侦听器：

document.querySelector（“第一节”）
.addEventListener（“wheel”，（）=>this.myFunction1（），true）；

请注意，

this.myFunction1

已成为

（）=>this.myFunction1（）

。换句话说，我将回调函数的名称包装在lambda中

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

document.querySelector（“第一节”）.removeEventListener（“wheel”，this.myFunction1，true）；

最后，也是最重要的一点，为什么要这样使用事件侦听器？这绝对不是有棱角的方式 根据：

使用不标识任何参数的参数调用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

是一个引用handler的相同实例的函数

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

---

但AFAIK

useCapture

参数尚不受支持。因此它总是

false

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

@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() {
  }
}

@组件（{
模板：“”
})
导出类myComponent{
私有侦听器=[]；
@ViewChild（'sectionOne'）
公共部分：ElementRef

错误：core.es5.js:1020错误类型错误：未能在“EventTarget”上执行“removeEventListener”：需要2个参数，但只存在1个。这是我收到的错误。我的错误。看起来像
removeEventListener（）
至少需要2个参数。所以你可以保留你的原始代码。但它没有为我的问题提供解决方案！angular 4的解决方法是什么？我只找到angularjs解决这个问题的方法，但不是angular 4。请保持热情。这里的人都是自愿帮助的。而且，你从来没有说过你要找一个n Angular solution…Angular方法是创建一个属性指令。您可以使用
@HostListener
添加侦听器。好的，没有角度方法来分离侦听器，但是您可以在侦听器内设置一个标志，以确保它只运行一次。请查看文档，感谢您的时间。您应该知道，这不是唯一的方法添加和删除事件侦听器的角度方式。@cyrix我知道。您也应该注意这个问题@yuruzi注释是针对OP的，请记住，这不是角度方式，在支持被动事件侦听器后应进行更改。此外，不应使用
文档。querySelector
，而应用于example
ViewChild
decorator.@cyrix这是一个很好的建议，但是如果
#section one
不是他的组件的一部分该怎么办。看看他的代码，我发现这段代码不支持服务器端呈现或服务人员），这里的主要问题是如何删除捕获阶段捕获的
EventListener
这里的主要内容是使用useCapture参数。请将其添加到示例中。但请尽量不要覆盖EventManagerPluginYes angular现在不支持被动事件侦听器，我将添加一个注释。