AddEventListener 事件多次调用
AddEventListener Event calling multiple times
我有一个带有 Angular 框架的简单 Cordova 项目。我正在使用 https://github.com/auctifera-josed/cordova-plugin-idynamo 插件与 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);
}
}
并在侦听器中使用此函数 registration/deregistration:
window.addEventListener('magtekEvent', magtekEventHandler, true);
window.removeEventListener('magtekEvent', magtekEventHandler, true);
我有一个带有 Angular 框架的简单 Cordova 项目。我正在使用 https://github.com/auctifera-josed/cordova-plugin-idynamo 插件与 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);
}
}
并在侦听器中使用此函数 registration/deregistration:
window.addEventListener('magtekEvent', magtekEventHandler, true);
window.removeEventListener('magtekEvent', magtekEventHandler, true);