Ionic / Angular: EventListener 调用多次，重新访问页面后

Question

我的 ionic/Angular 应用程序中的 EventListener 在重新访问 page/view 后被调用了多次。

代码：

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));
    }

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

离开并重新访问该页面后，我收到两次“日志：YAY”。当我再次这样做时，我得到了 3 次，依此类推...

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

Answer 1

每次访问都会创建一个新的事件侦听器，而之前的事件侦听器尚未被删除。实现 OnDestroy 挂钩并使用 removeEventListener() 删除事件侦听器。当组件为 closed/destroyed.

时，这将删除现有的事件侦听器

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()，您还可以使用 RxJS fromEvent 来处理事件。在那种情况下，必须在 ngOnDestroy 挂钩中关闭对它的订阅。

Ionic / Angular: EventListener 调用多次，重新访问页面后

Ionic / Angular: EventListener called multiple times, after re-visiting the page

addeventlistener

ionic3

angular