Javascript AddEventListener事件多次调用

我有一个带有角度框架的简单Cordova项目。我正在使用插件与MagTek设备通信。我正在收听加载特定屏幕的

'magtekEvent'

，以捕获数据。每次我转到其他屏幕并返回此屏幕时，我都可以看到事件根据我访问此屏幕的次数触发多次。我试图消除事件，但什么也没发生。当我转到其他屏幕或关闭此设备时，是否有人可以帮助我停止此事件

我在插件文件中添加了一个日志，发现插件只触发了一次事件，我希望它可以用JS本身修复

下面是代码片段：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER } from "src/app/config/constants";
import { Router, Event } from "@angular/router";
import { SharedDataService } from "./shared-data.service";
declare var magtek: any;

@Component({
  selector: 'app-mag-tek-testing',
  templateUrl: './mag-tek-testing.component.html',
  styleUrls: ['./mag-tek-testing.component.scss']
})
export class MagTekTestingComponent implements OnInit, OnDestroy {

  public deviceStatus = "";
  public cardData = "";
  public initRes;
  public openRes;

  constructor(
    public router: Router,
    public sharedDataService: SharedDataService,
  ) { }

  ngOnInit() {
    if (this.sharedDataService.isIOS) {
      this.initMagTekAndListen();
    }
  }

  public backToSearch() {
    this.router.navigate(['']);
  }

  public initMagTekAndListen() {
    document.addEventListener("deviceready", () => {
      magtek.init(function (err, res) { });
      this.openRes = function (res) { }
      magtek.openDevice(this.openRes, this.openRes);
      this.listenMagTekDevice();
    }, false);

  }

  public ngOnDestroy() {
    //Closing the device saves battery live
    if (this.sharedDataService.isIOS) {
      document.addEventListener("deviceready", () => {
        magtek.closeDevice(this.openRes, this.openRes);
      }, false);
    }
  }

  public listenMagTekDevice() {
    window.addEventListener('magtekEvent', (e: any) => {
      switch (e.dataType) {
        case 'onDeviceConnectionDidChange':
          alert(e.data);
          this.deviceStatus = e.data;
          break;
        case 'onDataReceived':
          alert(JSON.stringify(e.data));
          this.cardData = JSON.stringify(e.data);
          break;
        default:
          console.log(e);
      }
    }, true);
  }

  public closeConnection() {
    window.removeEventListener('magtekEvent', () => {
      alert("remove");
    }, true);
    magtek.closeDevice(this.openRes, this.openRes);
  }
}

---

为了取消注册事件侦听器，您需要传递与事件侦听器注册中使用的处理程序函数完全相同的处理程序函数

因此，您可以尝试将事件处理程序转换为命名函数：

function magtekEventHandler (e: any) {
  switch (e.dataType) {
    case 'onDeviceConnectionDidChange':
      alert(e.data);
      this.deviceStatus = e.data;
      break;
    case 'onDataReceived':
      alert(JSON.stringify(e.data));
      this.cardData = JSON.stringify(e.data);
      break;
    default:
      console.log(e);
  }
}

并在侦听器注册/注销期间使用此功能：

window.addEventListener('magtekEvent', magtekEventHandler, true);
window.removeEventListener('magtekEvent', magtekEventHandler, true);

---

@VinodhKumarC太好了，我很高兴它有帮助