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

Question

我用过下面的插件 科尔多瓦插件短信

方法：-

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 以获取低于错误的 ionic 3 任何人都可以提供帮助

file:///android_asset/www/cordova.js：第 312 行：成功错误 callbackId：SMS329868448：TypeError：无法读取属性“smsArived” 空 I/chromium：[INFO:CONSOLE(312)]“成功 callbackId 错误： SMS329868448 : TypeError: 无法读取属性 'smsArived' of null",, 来源：file:///android_asset/www/cordova.js

Answer 1

您正在尝试使用纯 javascript 来实现这一点，这在使用 Ionic/Angular/Typescript 时会导致不需要的效果。 startWatch 的成功回调函数中的 this 没有引用类范围，因此找不到 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方法返回一个函数。

现在应该很容易将这些更改应用到其他函数。