Question

我使用过以下插件科尔多瓦-插件-SMS

方法： -

watchSMS() {   
  if(window.SMS) window.SMS.startWatch(function(){  
    console.log('Succeed to start watching SMS');   
    document.addEventListener('onSMSArrive', this.smsArived);
  }, function(){   
    console.log('failed to start watching SMS');  
  });  
}

stopWatchSMS() {   
  if(window.SMS) window.SMS.stopWatch(function(){ 
     console.log('Succeed to stop watching SMS'); 
  }, function(){  
     console.log('failed to stop watching SMS');    
  }); 
}

smsArived = (result: any) => { 
    console.log("SMS DATA 2" + smsData);
    this.stopWatchSMS();   
}

使用上面的代码从SMS中读取otp以获得离子3以下错误可以任何帮助

file：///android_asset/www/cordova.js：第312行：成功错误 callbackId：SMS329868448：TypeError：无法读取属性＆＃39; smsArived＆＃39; null I / chromium：[INFO：CONSOLE（312）]＆＃34;成功callbackId错误： SMS329868448：TypeError：无法读取属性＆＃39; smsArived＆＃39; null＆＃34; ,, 来源：file：///android_asset/www/cordova.js

Answer 1

您正在尝试使用纯javascript实现此功能，这会在使用Ionic / Angular / Typescript时导致不必要的效果。成功回调函数this中的startWatch未引用类范围，因此未找到smsArived方法。

那么如何以Angular / Ionic的方式做到这一点？

首先，不要直接访问全局对象（window，document），这对性能和可维护性都有害。要使用一个未包含在ionic-natvie中的cordova插件，您必须告诉typescript插件句柄（SMS）存在：

declare var SMS; // put this at the same level as your imports

然后您必须按如下方式修改watchSMS函数：

watchSMS() {   
  SMS.startWatch(
    success => {

    },
    error => {

    }
  );
}

使用arrow functions进行回调this具有正确的范围。所以现在我们需要解决你对document.addEventListener的直接调用：在Angular4中，这是通过注入Renderer2类来完成的：

import { Renderer2 } from '@angular/core'; // the import
constructor(private renderer: Renderer2) {} // inject it in your constructor

现在，您可以在成功回调中添加事件侦听器，并在捕获事件时使用事件数据调用smsArived方法：

let removeSmsListener = this.renderer.listen('document', 'onSMSArrive', (event) => {
   this.smsArived(event);
});

请注意，您必须再次使用箭头功能来保留this的上下文。要清理后面的人，可以调用removeSmsListener()，因为渲染器的listen方法会返回一个函数。

现在应该很容易将这些更改应用于其他功能。

Ionic 3阅读用于OTP验证的SMS插件

1 个答案: