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

如何解决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));
    }

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

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

这个问题只影响监听函数，调用子函数并需要这个。

解决方法

每次访问都会创建一个新的事件侦听器，而之前的事件侦听器尚未删除。实现 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()，您还可以使用 RxJS fromEvent 来处理事件。在这种情况下，必须在 ngOnDestroy 钩子中关闭对它的订阅。