Question

我在离子3聊天应用程序中尝试了import { SMS } from '@ionic-native/sms';。但document.removeEventListener('onSMSArrive');无效。

这是我正在使用的包

"@ionic-native/sms": "^4.3.0",
"@ionic-native/core": "^4.3.0",
"cordova-sms-plugin": "^0.1.11",

问题是当我第一次来到我的页面时它完全正常工作并在我收到短信到手机时收到消息。 但如果我回到另一个页面然后回到页面，我会在我的函数中收到两次相同的消息。我认为事件监听器没有删除，当我再次浏览到该页面时，另一个监听器正在添加到文件。

这是我的代码

我在页面加载时添加事件监听器，并在页面卸载时将其删除。

public ionViewWillEnter() {
    this.smsService.startMessageListner();
}

public ionViewWillLeave() {
    this.smsService.stopMessageListner();
}

以下是我服务中的startMessageListner()和stopMessageListner()功能。

public startMessageListner()
{
    --- some works do here ---
    this.startListner();
}

public startListner()
{
    this.recieveMessage().then((message) => {
        --- receives message here and when after 
            navigating multiple times I receives 
            multiple same messages here---
    }
}

public recieveMessage() {

    if (!window.SMS) { alert('SMS plugin not ready'); return; }

    window.SMS.startWatch(function() {
        console.log('Watching');
    }, function() {
        console.log('Not Watching');
    });

    this.promise = new Promise((resolve, reject) => {
        document.addEventListener('onSMSArrive', this.resolveMessage(resolve));
    });

    return this.promise;
}

public stopMessageListner()
{
    --- some works do here ---
    this.stopReciveMessage();
}

public stopReciveMessage()
{
    // ***This one also not works***
    // document.removeEventListener('onSMSArrive', (event)=>{
    //     window.SMS.stopWatch(function() {
    //         console.log('Stop Watching');
    //     }, function() {
    //         console.log('Not Stop Watching');
    //     });
    // });

    document.removeEventListener('onSMSArrive');

    window.SMS.stopWatch(function() {
        console.log('Stop Watching');
    }, function() {
        console.log('Not Stop Watching');
    });
}

请帮我解决这个问题。这个问题在整个星期都浪费了。仍然没有运气:(

===更新了评论===

所有给定的链接都说我必须在删除事件监听器时传递完全相同的函数。在我的情况下，当我呼叫this.resolveMessage(resolve)时，我正在使用resolve参数传递document.addEventListener。所以我已经按照以下方式尝试了，但仍未解决。

public recieveMessage() {

    --same content as above--

    let self = this; // I added this line for safe side
    this.promise = new Promise((resolve, reject) => {
        self.resolve = resolve;
        document.addEventListener('onSMSArrive', self.resolveMessage(resolve),false);
    });

    return this.promise;
}

public stopReciveMessage()
{
    document.removeEventListener('onSMSArrive', this.resolveMessage(this.resolve),false);

    window.SMS.stopWatch(function() {
        console.log('Stop Watching');
    }, function() {
        console.log('Not Stop Watching');
    });
}

2。对于1中的同一recieveMessage()。

    public stopReciveMessage()
    {
        document.removeEventListener('onSMSArrive', this.resolveMessage,false);

        window.SMS.stopWatch(function() {
            console.log('Stop Watching');
        }, function() {
            console.log('Not Stop Watching');
        });
    }

3。对于1中的同一recieveMessage()。

    public stopReciveMessage()
    {
        let self = this;
        this.promise = new Promise((resolve, reject) => {
            document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
            window.SMS.stopWatch(function() {
                console.log('Stop Watching');
            }, function() {
                console.log('Not Stop Watching');
            });
        });
    }

4。对于1中的同一recieveMessage()。

    public stopReciveMessage()
    {
        let self = this;
        this.promise = (resolve, reject) => {
            document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
            window.SMS.stopWatch(function() {
                console.log('Stop Watching');
            }, function() {
                console.log('Not Stop Watching');
            });
        };
    }

由于

Answer 1

我同意删除打字稿中的事件监听器真的很痛苦。我在Vue中解决了这个问题：

class App {

    mylistener:EventListener

    created(){
        this.mylistener = (e:Event) => this.logMessage(e,"hello")
        window.addEventListener('click', this.mylistener);
    }

    destroyed(){
        window.removeEventListener("click", this.mylistener)
    }

    logMessage(e:Event, str:String){
        console.log("click event was called")
    }
}

这假设在创建和删除组件时调用“created”和“destroyed”函数。首先检查一下您是否可以使用基本示例，如果可以，请查看如何将其应用于您的SMS库 - 该库可能存在问题。

删除Typescript的事件监听器不起作用

1 个答案: