如何在我的angular 7 component.ts文件中使用cordova插件功能?

时间:2019-04-16 11:40:30

标签: angular cordova angular7 hybrid-mobile-app

我有一个cordova应用程序,其中已经安装了一些插件,例如device,appversion。 在设备就绪时,这些插件会返回一些全局variables,例如device。 对于UI代码,我使用的是角度7。

如何在角度分量内部使用cordova变量?

如果在角度侧有任何变量声明,那么我只想在一个文件中执行此操作,并希望在整个角度应用程序中使用该文件。

1 个答案:

答案 0 :(得分:0)

使用此方法的最佳方法是将来自cordova的所有全局变量存储到根共享的服务中。

在您的app.component或根组件中,声明以下变量:

//Use "declare" to have variables that store cordova and pluggins before Component declaration
declare var StatusBar: any;
declare var cordova: any;
declare var window:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

在组件构造函数中,注入将存储详细信息的服务:

//In constructor you inject a service (you can call it cordovaService)
cosntructor(private cordovaService:CordovaService){}

您必须添加ngAfterViewInit并添加document.addEventListener('device ready')

ngAfterViewInit() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  }

onDeviceReady中,您可以处理和存储Cordova相关内容:

onDeviceReady() {
this.cordovaService.cordova=cordova;

 cordova.getAppVersion.getVersionNumber().then(appVersion => {
      console.log(appVersion);
    });

 }

现在,任何注入CordovaService的组件都可以访问和使用此数据/变量。