Удалить Event Listener для Typescript не работает

Question

Я попытался import { SMS } from '@ionic-native/sms'; в своем приложении чата ionic 3.Но 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. Поэтому я уже попробовал его следующим образом, но он все еще не решен.

1. 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. Для того же recieveMessage() в 1.

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

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

3. Для того же recieveMessage() в 1.

    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. Для того же recieveMessage() в 1.

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

Это предполагает, что «созданные» и «разрушенные» функции вызываются, когда ваш компонент создается и удаляется.Сначала проверьте, можете ли вы заставить работать базовый пример, и если да, посмотрите, как вы можете применить его к своей библиотеке SMS - у этой библиотеки могут быть собственные проблемы.