时间戳

首页 > 解决方案 > Ionic / Angular：在重新访问页面后多次调用EventListener

angular - Ionic / Angular：在重新访问页面后多次调用EventListener

问题描述

在重新访问页面/视图后，我的 ionic/Angular 应用程序中的 EventListener 被多次调用。

代码：

export class xyPage implements OnInit {

    constructor(
      ...
    ) {
        document.addEventListener('xzy', this.listenerFunction.bind(this));
    }

    private listenerFunction() {
        console.log('YAY');
        this.doSomething(this.options, this.timer);
    }

    ...

    ionViewWillLeave() {
            document.removeEventListener('xzy', this.listenerFunction.bind(this));
    }

当我第一次访问我的页面时，一切正常。

离开并重新访问页面后，我得到了两次“log: YAY”。当我再次这样做时，我得到了三遍，依此类推......

此问题仅影响调用子函数并需要它的侦听器函数。

标签： angularionic3addeventlistener

解决方案

每次访问都会创建一个新的事件侦听器，而之前的事件尚未被删除。使用 实现OnDestroy挂钩并删除事件侦听器removeEventListener()。当组件关闭/销毁时，这将删除现有的事件侦听器。

export class xyPage implements OnInit, OnDestroy {

    constructor(
      ...
    ) {
        document.addEventListener('xzy', this.listenerFunction.bind(this));
    }

    private listenerFunction() {
        console.log('YAY');
        this.doSomething(this.options, this.timer);
    }

    ngOnDestroy() {
        document.removeEventListener('xzy', this.listenerFunction.bind(this));
    }
   
    ...
}

也就是说，document在 Angular 中绑定事件监听器并不优雅。它不会搜索特定组件，而是搜索完整的 SPA DOM。相反，您可以使用@ViewChild模板引用变量并将侦听器绑定到组件的特定元素。除了 JS addEventListener()，您还可以使用 RxJSfromEvent来处理事件。仍然在这种情况下，对它的订阅必须在ngOnDestroy钩子中关闭。

推荐阅读